@djangocfg/ui-tools 2.1.126 → 2.1.127

package/dist/{chunk-EGYUND4E.cjs → chunk-DFWXRCIC.cjs}

@@ -7,9 +7,36 @@ var reactJsonTree = require('react-json-tree');
 var components = require('@djangocfg/ui-core/components');
 var jsxRuntime = require('react/jsx-runtime');
 
-var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ title, data, config = {}, jsonTreeProps = {} }) => {
+var MODE_PRESETS = {
+  full: {
+    showExpandControls: true,
+    showActionButtons: true,
+    showCollectionInfo: true
+  },
+  compact: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: true
+  },
+  inline: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: false
+  }
+};
+var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({
+  title,
+  data,
+  mode = "full",
+  config = {},
+  jsonTreeProps = {}
+}) => {
   const [expandAll, setExpandAll] = react.useState(null);
   const [renderKey, setRenderKey] = react.useState(0);
+  const mergedConfig = react.useMemo(() => ({
+    ...MODE_PRESETS[mode],
+    ...config
+  }), [mode, config]);
   const {
     maxAutoExpandDepth = 2,
     maxAutoExpandArrayItems = 10,
@@ -21,7 +48,7 @@ var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ title, data,
     showActionButtons = true,
     className = "",
     preserveKeyOrder = true
-  } = config;
+  } = mergedConfig;
   const jsonTreeTheme = {
     scheme: "djangocfg-dark",
     base00: "transparent",
@@ -111,8 +138,34 @@ var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ title, data,
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }, "handleDownload");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative border border-border rounded-sm h-full overflow-hidden ${className}`, children: [
-    (title || showExpandControls || showActionButtons) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b border-border bg-muted/50 rounded-t-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+  const containerClasses = react.useMemo(() => {
+    const base = "relative overflow-hidden";
+    switch (mode) {
+      case "full":
+        return `${base} border border-border rounded-sm h-full ${className}`;
+      case "compact":
+        return `${base} border border-border/50 rounded-md ${className}`;
+      case "inline":
+        return `${base} ${className}`;
+      default:
+        return `${base} ${className}`;
+    }
+  }, [mode, className]);
+  const contentPadding = react.useMemo(() => {
+    switch (mode) {
+      case "full":
+        return "p-4";
+      case "compact":
+        return "p-3";
+      case "inline":
+        return "p-2";
+      default:
+        return "p-4";
+    }
+  }, [mode]);
+  const showHeader = (title || showExpandControls || showActionButtons) && mode === "full";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b border-border bg-muted/50 rounded-t-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-lg font-semibold text-foreground", children: title }),
       (showExpandControls || showActionButtons) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
         showExpandControls && /* @__PURE__ */ jsxRuntime.jsx(
@@ -163,7 +216,7 @@ var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ title, data,
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-auto ${contentPadding}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactJsonTree.JSONTree,
       {
         data,
@@ -185,5 +238,5 @@ var JsonTreeComponent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ title, data,
 var JsonTree_default = JsonTreeComponent;
 
 exports.JsonTree_default = JsonTree_default;
-//# sourceMappingURL=chunk-EGYUND4E.cjs.map
-//# sourceMappingURL=chunk-EGYUND4E.cjs.map
+//# sourceMappingURL=chunk-DFWXRCIC.cjs.map
+//# sourceMappingURL=chunk-DFWXRCIC.cjs.map

package/dist/chunk-DFWXRCIC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/JsonTree/index.tsx"],"names":["__name","useState","useMemo","jsxs","jsx","Button","Fragment","ChevronUp","ChevronDown","CopyButton","Download","JSONTree"],"mappings":"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","file":"chunk-DFWXRCIC.cjs","sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Download } from 'lucide-react';\nimport React, { useState, useMemo } from 'react';\nimport { CommonExternalProps, JSONTree } from 'react-json-tree';\n\nimport { Button, CopyButton } from '@djangocfg/ui-core/components';\n\nexport type { Language } from 'prism-react-renderer';\n\n/**\n * Display modes for JsonTree\n * - full: With toolbar (Expand All, Copy, Download) and border\n * - compact: No toolbar, with subtle border\n * - inline: Minimal, no border, for embedding in other components\n */\nexport type JsonTreeMode = 'full' | 'compact' | 'inline';\n\nexport interface JsonTreeConfig {\n  /** Maximum depth to expand automatically (default: 2) */\n  maxAutoExpandDepth?: number;\n  /** Maximum items in array to auto-expand (default: 10) */\n  maxAutoExpandArrayItems?: number;\n  /** Maximum object keys to auto-expand (default: 5) */\n  maxAutoExpandObjectKeys?: number;\n  /** Maximum string length before truncation (default: 200) */\n  maxStringLength?: number;\n  /** Collection limit for performance (default: 50) */\n  collectionLimit?: number;\n  /** Whether to show collection info (array length, object keys count) */\n  showCollectionInfo?: boolean;\n  /** Whether to show expand/collapse all buttons */\n  showExpandControls?: boolean;\n  /** Whether to show copy/download buttons */\n  showActionButtons?: boolean;\n  /** Custom CSS classes for the container */\n  className?: string;\n  /** Whether to preserve object key order (default: true) */\n  preserveKeyOrder?: boolean;\n}\n\nexport interface JsonTreeComponentProps {\n  title?: string;\n  data: unknown;\n  /**\n   * Display mode:\n   * - \"full\" (default): With toolbar and border\n   * - \"compact\": No toolbar, subtle styling\n   * - \"inline\": Minimal, no border\n   */\n  mode?: JsonTreeMode;\n  config?: JsonTreeConfig;\n  /** Override for react-json-tree props */\n  jsonTreeProps?: Partial<CommonExternalProps>;\n}\n\n// Mode presets\nconst MODE_PRESETS: Record<JsonTreeMode, Partial<JsonTreeConfig>> = {\n  full: {\n    showExpandControls: true,\n    showActionButtons: true,\n    showCollectionInfo: true,\n  },\n  compact: {\n    showExpandControls: false,\n    showActionButtons: false,\n    showCollectionInfo: true,\n  },\n  inline: {\n    showExpandControls: false,\n    showActionButtons: false,\n    showCollectionInfo: false,\n  },\n};\n\nconst JsonTreeComponent = ({\n  title,\n  data,\n  mode = 'full',\n  config = {},\n  jsonTreeProps = {}\n}: JsonTreeComponentProps) => {\n  // State for expand/collapse all\n  const [expandAll, setExpandAll] = useState<boolean | null>(null);\n  const [renderKey, setRenderKey] = useState(0);\n\n  // Merge mode presets with config (config overrides presets)\n  const mergedConfig = useMemo(() => ({\n    ...MODE_PRESETS[mode],\n    ...config,\n  }), [mode, config]);\n\n  // Default configuration\n  const {\n    maxAutoExpandDepth = 2,\n    maxAutoExpandArrayItems = 10,\n    maxAutoExpandObjectKeys = 5,\n    maxStringLength = 200,\n    collectionLimit = 50,\n    showCollectionInfo = true,\n    showExpandControls = true,\n    showActionButtons = true,\n    className = '',\n    preserveKeyOrder = true,\n  } = mergedConfig;\n\n  // JSON Tree theme optimized for dark theme\n  const jsonTreeTheme = {\n    scheme: 'djangocfg-dark',\n    base00: 'transparent', // Background\n    base01: '#1a1a1a', // Lighter background\n    base02: '#2a2a2a', // Selection background\n    base03: '#6b7280', // Comments, invisibles\n    base04: '#9ca3af', // Dark foreground\n    base05: '#e5e7eb', // Default foreground\n    base06: '#f3f4f6', // Light foreground\n    base07: '#ffffff', // Lightest foreground\n    base08: '#ef4444', // Red - for null, undefined\n    base09: '#f97316', // Orange - for numbers\n    base0A: '#eab308', // Yellow - for strings\n    base0B: '#22c55e', // Green - for booleans (true)\n    base0C: '#06b6d4', // Cyan - for dates, regex\n    base0D: '#3b82f6', // Blue - for keys\n    base0E: '#a855f7', // Purple - for functions\n    base0F: '#f43f5e', // Pink - for deprecations\n  };\n\n  // Smart expansion logic\n  const shouldExpandNodeInitially = (keyPath: readonly (string | number)[], nodeData: unknown, level: number) => {\n    // If user explicitly clicked \"Expand All\", expand everything\n    if (expandAll === true) return true;\n\n    // If user explicitly clicked \"Collapse All\", collapse everything\n    if (expandAll === false) return false;\n\n    // Default auto-expansion (expandAll === null)\n    // Always expand up to maxAutoExpandDepth\n    if (level <= maxAutoExpandDepth) return true;\n\n    // For arrays, expand if they have less than maxAutoExpandArrayItems\n    if (Array.isArray(nodeData) && nodeData.length <= maxAutoExpandArrayItems) return true;\n\n    // For objects, expand if they have less than maxAutoExpandObjectKeys\n    if (nodeData && typeof nodeData === 'object' && !Array.isArray(nodeData)) {\n      const keys = Object.keys(nodeData);\n      return keys.length <= maxAutoExpandObjectKeys;\n    }\n\n    return false;\n  };\n\n  // Collection info display\n  const getItemString = showCollectionInfo\n    ? (nodeType: string, nodeData: unknown) => {\n        if (nodeType === 'Array') {\n          const length = Array.isArray(nodeData) ? nodeData.length : 0;\n          return length > 0 ? <span className=\"text-muted-foreground text-sm\">({length} items)</span> : null;\n        }\n        if (nodeType === 'Object') {\n          const keys = nodeData && typeof nodeData === 'object' ? Object.keys(nodeData) : [];\n          return keys.length > 0 ? <span className=\"text-muted-foreground text-sm\">({keys.length} keys)</span> : null;\n        }\n        return null;\n      }\n    : () => null;\n\n  // Value processing for better display\n  const postprocessValue = (value: unknown) => {\n    // Truncate very long strings\n    if (typeof value === 'string' && value.length > maxStringLength) {\n      return value.substring(0, maxStringLength) + '... (truncated)';\n    }\n    return value;\n  };\n\n  // Custom node detection for special formatting\n  const isCustomNode = (value: unknown) => {\n    // Mark URLs as custom nodes for special styling\n    if (typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'))) {\n      return true;\n    }\n    return false;\n  };\n\n  // JSON string for copy/download\n  const jsonString = JSON.stringify(data, null, 2);\n\n  // Action handlers\n  const handleDownload = () => {\n    const blob = new Blob([jsonString], { type: 'application/json' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = 'data.json';\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n  };\n\n  // Container classes based on mode\n  const containerClasses = useMemo(() => {\n    const base = 'relative overflow-hidden';\n    switch (mode) {\n      case 'full':\n        return `${base} border border-border rounded-sm h-full ${className}`;\n      case 'compact':\n        return `${base} border border-border/50 rounded-md ${className}`;\n      case 'inline':\n        return `${base} ${className}`;\n      default:\n        return `${base} ${className}`;\n    }\n  }, [mode, className]);\n\n  // Content padding based on mode\n  const contentPadding = useMemo(() => {\n    switch (mode) {\n      case 'full':\n        return 'p-4';\n      case 'compact':\n        return 'p-3';\n      case 'inline':\n        return 'p-2';\n      default:\n        return 'p-4';\n    }\n  }, [mode]);\n\n  // Show header only in full mode or when title is provided\n  const showHeader = (title || showExpandControls || showActionButtons) && mode === 'full';\n\n  return (\n    <div className={containerClasses}>\n      {/* Header with title and controls */}\n      {showHeader && (\n        <div className=\"p-4 border-b border-border bg-muted/50 rounded-t-sm\">\n          <div className=\"flex items-center justify-between\">\n            {title && (\n              <h6 className=\"text-lg font-semibold text-foreground\">{title}</h6>\n            )}\n\n            {(showExpandControls || showActionButtons) && (\n              <div className=\"flex items-center space-x-2\">\n                {/* Expand/Collapse Controls */}\n                {showExpandControls && (\n                  <Button\n                    variant={expandAll === true ? \"default\" : \"outline\"}\n                    size=\"sm\"\n                    onClick={() => {\n                      const newState = expandAll === true ? false : true;\n                      setExpandAll(newState);\n                      setRenderKey(prev => prev + 1);\n                    }}\n                    className=\"h-8 px-2\"\n                  >\n                    {expandAll === true ? (\n                      <>\n                        <ChevronUp className=\"h-3 w-3\" />\n                        <span className=\"ml-1 text-xs\">Collapse All</span>\n                      </>\n                    ) : (\n                      <>\n                        <ChevronDown className=\"h-3 w-3\" />\n                        <span className=\"ml-1 text-xs\">Expand All</span>\n                      </>\n                    )}\n                  </Button>\n                )}\n\n                {/* Action Buttons */}\n                {showActionButtons && (\n                  <>\n                    <CopyButton\n                      value={jsonString}\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"h-8 px-2\"\n                      iconClassName=\"h-3 w-3\"\n                    >\n                      Copy\n                    </CopyButton>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={handleDownload}\n                      className=\"h-8 px-2\"\n                    >\n                      <Download className=\"h-3 w-3\" />\n                      <span className=\"ml-1 text-xs hidden sm:inline\">Download</span>\n                    </Button>\n                  </>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* JSON Tree Content */}\n      <div className={`overflow-auto ${contentPadding}`}>\n        <JSONTree\n          key={renderKey} // Force re-render when expand/collapse state changes\n          data={data}\n          theme={jsonTreeTheme}\n          invertTheme={false}\n          hideRoot={true}\n          shouldExpandNodeInitially={shouldExpandNodeInitially}\n          getItemString={getItemString}\n          postprocessValue={postprocessValue}\n          isCustomNode={isCustomNode}\n          collectionLimit={collectionLimit}\n          sortObjectKeys={!preserveKeyOrder}\n          {...jsonTreeProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default JsonTreeComponent;\n"]}

package/dist/{chunk-OYYCGIBF.mjs → chunk-XXFYTIQK.mjs}

@@ -1,13 +1,40 @@
 import { __name } from './chunk-CGILA3WO.mjs';
 import { ChevronUp, ChevronDown, Download } from 'lucide-react';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { JSONTree } from 'react-json-tree';
 import { Button, CopyButton } from '@djangocfg/ui-core/components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, jsonTreeProps = {} }) => {
+var MODE_PRESETS = {
+  full: {
+    showExpandControls: true,
+    showActionButtons: true,
+    showCollectionInfo: true
+  },
+  compact: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: true
+  },
+  inline: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: false
+  }
+};
+var JsonTreeComponent = /* @__PURE__ */ __name(({
+  title,
+  data,
+  mode = "full",
+  config = {},
+  jsonTreeProps = {}
+}) => {
   const [expandAll, setExpandAll] = useState(null);
   const [renderKey, setRenderKey] = useState(0);
+  const mergedConfig = useMemo(() => ({
+    ...MODE_PRESETS[mode],
+    ...config
+  }), [mode, config]);
   const {
     maxAutoExpandDepth = 2,
     maxAutoExpandArrayItems = 10,
@@ -19,7 +46,7 @@ var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, json
     showActionButtons = true,
     className = "",
     preserveKeyOrder = true
-  } = config;
+  } = mergedConfig;
   const jsonTreeTheme = {
     scheme: "djangocfg-dark",
     base00: "transparent",
@@ -109,8 +136,34 @@ var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, json
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }, "handleDownload");
-  return /* @__PURE__ */ jsxs("div", { className: `relative border border-border rounded-sm h-full overflow-hidden ${className}`, children: [
-    (title || showExpandControls || showActionButtons) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border bg-muted/50 rounded-t-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  const containerClasses = useMemo(() => {
+    const base = "relative overflow-hidden";
+    switch (mode) {
+      case "full":
+        return `${base} border border-border rounded-sm h-full ${className}`;
+      case "compact":
+        return `${base} border border-border/50 rounded-md ${className}`;
+      case "inline":
+        return `${base} ${className}`;
+      default:
+        return `${base} ${className}`;
+    }
+  }, [mode, className]);
+  const contentPadding = useMemo(() => {
+    switch (mode) {
+      case "full":
+        return "p-4";
+      case "compact":
+        return "p-3";
+      case "inline":
+        return "p-2";
+      default:
+        return "p-4";
+    }
+  }, [mode]);
+  const showHeader = (title || showExpandControls || showActionButtons) && mode === "full";
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    showHeader && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border bg-muted/50 rounded-t-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       title && /* @__PURE__ */ jsx("h6", { className: "text-lg font-semibold text-foreground", children: title }),
       (showExpandControls || showActionButtons) && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         showExpandControls && /* @__PURE__ */ jsx(
@@ -161,7 +214,7 @@ var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, json
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: `overflow-auto ${contentPadding}`, children: /* @__PURE__ */ jsx(
       JSONTree,
       {
         data,
@@ -183,5 +236,5 @@ var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, json
 var JsonTree_default = JsonTreeComponent;
 
 export { JsonTree_default };
-//# sourceMappingURL=chunk-OYYCGIBF.mjs.map
-//# sourceMappingURL=chunk-OYYCGIBF.mjs.map
+//# sourceMappingURL=chunk-XXFYTIQK.mjs.map
+//# sourceMappingURL=chunk-XXFYTIQK.mjs.map

package/dist/chunk-XXFYTIQK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/JsonTree/index.tsx"],"names":[],"mappings":"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","file":"chunk-XXFYTIQK.mjs","sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Download } from 'lucide-react';\nimport React, { useState, useMemo } from 'react';\nimport { CommonExternalProps, JSONTree } from 'react-json-tree';\n\nimport { Button, CopyButton } from '@djangocfg/ui-core/components';\n\nexport type { Language } from 'prism-react-renderer';\n\n/**\n * Display modes for JsonTree\n * - full: With toolbar (Expand All, Copy, Download) and border\n * - compact: No toolbar, with subtle border\n * - inline: Minimal, no border, for embedding in other components\n */\nexport type JsonTreeMode = 'full' | 'compact' | 'inline';\n\nexport interface JsonTreeConfig {\n  /** Maximum depth to expand automatically (default: 2) */\n  maxAutoExpandDepth?: number;\n  /** Maximum items in array to auto-expand (default: 10) */\n  maxAutoExpandArrayItems?: number;\n  /** Maximum object keys to auto-expand (default: 5) */\n  maxAutoExpandObjectKeys?: number;\n  /** Maximum string length before truncation (default: 200) */\n  maxStringLength?: number;\n  /** Collection limit for performance (default: 50) */\n  collectionLimit?: number;\n  /** Whether to show collection info (array length, object keys count) */\n  showCollectionInfo?: boolean;\n  /** Whether to show expand/collapse all buttons */\n  showExpandControls?: boolean;\n  /** Whether to show copy/download buttons */\n  showActionButtons?: boolean;\n  /** Custom CSS classes for the container */\n  className?: string;\n  /** Whether to preserve object key order (default: true) */\n  preserveKeyOrder?: boolean;\n}\n\nexport interface JsonTreeComponentProps {\n  title?: string;\n  data: unknown;\n  /**\n   * Display mode:\n   * - \"full\" (default): With toolbar and border\n   * - \"compact\": No toolbar, subtle styling\n   * - \"inline\": Minimal, no border\n   */\n  mode?: JsonTreeMode;\n  config?: JsonTreeConfig;\n  /** Override for react-json-tree props */\n  jsonTreeProps?: Partial<CommonExternalProps>;\n}\n\n// Mode presets\nconst MODE_PRESETS: Record<JsonTreeMode, Partial<JsonTreeConfig>> = {\n  full: {\n    showExpandControls: true,\n    showActionButtons: true,\n    showCollectionInfo: true,\n  },\n  compact: {\n    showExpandControls: false,\n    showActionButtons: false,\n    showCollectionInfo: true,\n  },\n  inline: {\n    showExpandControls: false,\n    showActionButtons: false,\n    showCollectionInfo: false,\n  },\n};\n\nconst JsonTreeComponent = ({\n  title,\n  data,\n  mode = 'full',\n  config = {},\n  jsonTreeProps = {}\n}: JsonTreeComponentProps) => {\n  // State for expand/collapse all\n  const [expandAll, setExpandAll] = useState<boolean | null>(null);\n  const [renderKey, setRenderKey] = useState(0);\n\n  // Merge mode presets with config (config overrides presets)\n  const mergedConfig = useMemo(() => ({\n    ...MODE_PRESETS[mode],\n    ...config,\n  }), [mode, config]);\n\n  // Default configuration\n  const {\n    maxAutoExpandDepth = 2,\n    maxAutoExpandArrayItems = 10,\n    maxAutoExpandObjectKeys = 5,\n    maxStringLength = 200,\n    collectionLimit = 50,\n    showCollectionInfo = true,\n    showExpandControls = true,\n    showActionButtons = true,\n    className = '',\n    preserveKeyOrder = true,\n  } = mergedConfig;\n\n  // JSON Tree theme optimized for dark theme\n  const jsonTreeTheme = {\n    scheme: 'djangocfg-dark',\n    base00: 'transparent', // Background\n    base01: '#1a1a1a', // Lighter background\n    base02: '#2a2a2a', // Selection background\n    base03: '#6b7280', // Comments, invisibles\n    base04: '#9ca3af', // Dark foreground\n    base05: '#e5e7eb', // Default foreground\n    base06: '#f3f4f6', // Light foreground\n    base07: '#ffffff', // Lightest foreground\n    base08: '#ef4444', // Red - for null, undefined\n    base09: '#f97316', // Orange - for numbers\n    base0A: '#eab308', // Yellow - for strings\n    base0B: '#22c55e', // Green - for booleans (true)\n    base0C: '#06b6d4', // Cyan - for dates, regex\n    base0D: '#3b82f6', // Blue - for keys\n    base0E: '#a855f7', // Purple - for functions\n    base0F: '#f43f5e', // Pink - for deprecations\n  };\n\n  // Smart expansion logic\n  const shouldExpandNodeInitially = (keyPath: readonly (string | number)[], nodeData: unknown, level: number) => {\n    // If user explicitly clicked \"Expand All\", expand everything\n    if (expandAll === true) return true;\n\n    // If user explicitly clicked \"Collapse All\", collapse everything\n    if (expandAll === false) return false;\n\n    // Default auto-expansion (expandAll === null)\n    // Always expand up to maxAutoExpandDepth\n    if (level <= maxAutoExpandDepth) return true;\n\n    // For arrays, expand if they have less than maxAutoExpandArrayItems\n    if (Array.isArray(nodeData) && nodeData.length <= maxAutoExpandArrayItems) return true;\n\n    // For objects, expand if they have less than maxAutoExpandObjectKeys\n    if (nodeData && typeof nodeData === 'object' && !Array.isArray(nodeData)) {\n      const keys = Object.keys(nodeData);\n      return keys.length <= maxAutoExpandObjectKeys;\n    }\n\n    return false;\n  };\n\n  // Collection info display\n  const getItemString = showCollectionInfo\n    ? (nodeType: string, nodeData: unknown) => {\n        if (nodeType === 'Array') {\n          const length = Array.isArray(nodeData) ? nodeData.length : 0;\n          return length > 0 ? <span className=\"text-muted-foreground text-sm\">({length} items)</span> : null;\n        }\n        if (nodeType === 'Object') {\n          const keys = nodeData && typeof nodeData === 'object' ? Object.keys(nodeData) : [];\n          return keys.length > 0 ? <span className=\"text-muted-foreground text-sm\">({keys.length} keys)</span> : null;\n        }\n        return null;\n      }\n    : () => null;\n\n  // Value processing for better display\n  const postprocessValue = (value: unknown) => {\n    // Truncate very long strings\n    if (typeof value === 'string' && value.length > maxStringLength) {\n      return value.substring(0, maxStringLength) + '... (truncated)';\n    }\n    return value;\n  };\n\n  // Custom node detection for special formatting\n  const isCustomNode = (value: unknown) => {\n    // Mark URLs as custom nodes for special styling\n    if (typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'))) {\n      return true;\n    }\n    return false;\n  };\n\n  // JSON string for copy/download\n  const jsonString = JSON.stringify(data, null, 2);\n\n  // Action handlers\n  const handleDownload = () => {\n    const blob = new Blob([jsonString], { type: 'application/json' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = 'data.json';\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n  };\n\n  // Container classes based on mode\n  const containerClasses = useMemo(() => {\n    const base = 'relative overflow-hidden';\n    switch (mode) {\n      case 'full':\n        return `${base} border border-border rounded-sm h-full ${className}`;\n      case 'compact':\n        return `${base} border border-border/50 rounded-md ${className}`;\n      case 'inline':\n        return `${base} ${className}`;\n      default:\n        return `${base} ${className}`;\n    }\n  }, [mode, className]);\n\n  // Content padding based on mode\n  const contentPadding = useMemo(() => {\n    switch (mode) {\n      case 'full':\n        return 'p-4';\n      case 'compact':\n        return 'p-3';\n      case 'inline':\n        return 'p-2';\n      default:\n        return 'p-4';\n    }\n  }, [mode]);\n\n  // Show header only in full mode or when title is provided\n  const showHeader = (title || showExpandControls || showActionButtons) && mode === 'full';\n\n  return (\n    <div className={containerClasses}>\n      {/* Header with title and controls */}\n      {showHeader && (\n        <div className=\"p-4 border-b border-border bg-muted/50 rounded-t-sm\">\n          <div className=\"flex items-center justify-between\">\n            {title && (\n              <h6 className=\"text-lg font-semibold text-foreground\">{title}</h6>\n            )}\n\n            {(showExpandControls || showActionButtons) && (\n              <div className=\"flex items-center space-x-2\">\n                {/* Expand/Collapse Controls */}\n                {showExpandControls && (\n                  <Button\n                    variant={expandAll === true ? \"default\" : \"outline\"}\n                    size=\"sm\"\n                    onClick={() => {\n                      const newState = expandAll === true ? false : true;\n                      setExpandAll(newState);\n                      setRenderKey(prev => prev + 1);\n                    }}\n                    className=\"h-8 px-2\"\n                  >\n                    {expandAll === true ? (\n                      <>\n                        <ChevronUp className=\"h-3 w-3\" />\n                        <span className=\"ml-1 text-xs\">Collapse All</span>\n                      </>\n                    ) : (\n                      <>\n                        <ChevronDown className=\"h-3 w-3\" />\n                        <span className=\"ml-1 text-xs\">Expand All</span>\n                      </>\n                    )}\n                  </Button>\n                )}\n\n                {/* Action Buttons */}\n                {showActionButtons && (\n                  <>\n                    <CopyButton\n                      value={jsonString}\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"h-8 px-2\"\n                      iconClassName=\"h-3 w-3\"\n                    >\n                      Copy\n                    </CopyButton>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={handleDownload}\n                      className=\"h-8 px-2\"\n                    >\n                      <Download className=\"h-3 w-3\" />\n                      <span className=\"ml-1 text-xs hidden sm:inline\">Download</span>\n                    </Button>\n                  </>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* JSON Tree Content */}\n      <div className={`overflow-auto ${contentPadding}`}>\n        <JSONTree\n          key={renderKey} // Force re-render when expand/collapse state changes\n          data={data}\n          theme={jsonTreeTheme}\n          invertTheme={false}\n          hideRoot={true}\n          shouldExpandNodeInitially={shouldExpandNodeInitially}\n          getItemString={getItemString}\n          postprocessValue={postprocessValue}\n          isCustomNode={isCustomNode}\n          collectionLimit={collectionLimit}\n          sortObjectKeys={!preserveKeyOrder}\n          {...jsonTreeProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default JsonTreeComponent;\n"]}

package/dist/index.cjs

@@ -6,7 +6,7 @@ require('./chunk-F2N7P5XU.cjs');
 var chunkTEFRA7GW_cjs = require('./chunk-TEFRA7GW.cjs');
 var chunkXTBRWVIV_cjs = require('./chunk-XTBRWVIV.cjs');
 var chunkOYLQZT62_cjs = require('./chunk-OYLQZT62.cjs');
-var chunkEGYUND4E_cjs = require('./chunk-EGYUND4E.cjs');
+var chunkDFWXRCIC_cjs = require('./chunk-DFWXRCIC.cjs');
 var chunkPNZSJN6T_cjs = require('./chunk-PNZSJN6T.cjs');
 var chunkPRPG2T2E_cjs = require('./chunk-PRPG2T2E.cjs');
 var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
@@ -729,7 +729,7 @@ function OpenapiLoadingFallback() {
 }
 chunkWGEGR3DF_cjs.__name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyPlaygroundLayout = createLazyComponent(
-  () => import('./PlaygroundLayout-RZMJWH3Y.cjs').then((mod) => ({ default: mod.PlaygroundLayout })),
+  () => import('./PlaygroundLayout-DFVQDA5G.cjs').then((mod) => ({ default: mod.PlaygroundLayout })),
   {
     displayName: "LazyPlaygroundLayout",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(OpenapiLoadingFallback, {})
@@ -834,7 +834,7 @@ var LazyVideoPlayer = createLazyComponent(
   }
 );
 var LazyJsonTree = createLazyComponent(
-  () => import('./JsonTree-TWXUBBIG.cjs'),
+  () => import('./JsonTree-IIVOSSVZ.cjs'),
   {
     displayName: "LazyJsonTree",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 100, text: "Loading JSON viewer..." })
@@ -859,7 +859,7 @@ function LottiePlayer(props) {
 }
 chunkWGEGR3DF_cjs.__name(LottiePlayer, "LottiePlayer");
 var PlaygroundLayout = React3.lazy(
-  () => import('./PlaygroundLayout-RZMJWH3Y.cjs').then((mod) => ({ default: mod.PlaygroundLayout }))
+  () => import('./PlaygroundLayout-DFVQDA5G.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 }) => {
@@ -1089,7 +1089,7 @@ Object.defineProperty(exports, "PrettyCode", {
 });
 Object.defineProperty(exports, "JsonTree", {
   enumerable: true,
-  get: function () { return chunkEGYUND4E_cjs.JsonTree_default; }
+  get: function () { return chunkDFWXRCIC_cjs.JsonTree_default; }
 });
 Object.defineProperty(exports, "ArrayFieldItemTemplate", {
   enumerable: true,