@djangocfg/ui-tools 2.1.417 → 2.1.419

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.417",
+  "version": "2.1.419",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -106,6 +106,11 @@
       "import": "./src/tools/data/JsonTree/lazy.tsx",
       "require": "./src/tools/data/JsonTree/lazy.tsx"
     },
+    "./json-editor": {
+      "types": "./src/tools/forms/JsonEditor/lazy.tsx",
+      "import": "./src/tools/forms/JsonEditor/lazy.tsx",
+      "require": "./src/tools/forms/JsonEditor/lazy.tsx"
+    },
     "./lottie-player": {
       "types": "./src/tools/media/LottiePlayer/lazy.tsx",
       "import": "./src/tools/media/LottiePlayer/lazy.tsx",
@@ -116,20 +121,40 @@
       "import": "./src/tools/forms/MarkdownEditor/lazy.tsx",
       "require": "./src/tools/forms/MarkdownEditor/lazy.tsx"
     },
+    "./notion-editor": {
+      "types": "./src/tools/forms/NotionEditor/lazy.tsx",
+      "import": "./src/tools/forms/NotionEditor/lazy.tsx",
+      "require": "./src/tools/forms/NotionEditor/lazy.tsx"
+    },
     "./markdown-message": {
-      "types": "./src/tools/dev/MarkdownMessage/index.ts",
-      "import": "./src/tools/dev/MarkdownMessage/index.ts",
-      "require": "./src/tools/dev/MarkdownMessage/index.ts"
+      "types": "./src/tools/dev/code/MarkdownMessage/index.ts",
+      "import": "./src/tools/dev/code/MarkdownMessage/index.ts",
+      "require": "./src/tools/dev/code/MarkdownMessage/index.ts"
     },
     "./openapi-viewer": {
-      "types": "./src/tools/dev/OpenapiViewer/lazy.tsx",
-      "import": "./src/tools/dev/OpenapiViewer/lazy.tsx",
-      "require": "./src/tools/dev/OpenapiViewer/lazy.tsx"
+      "types": "./src/tools/dev/api/OpenapiViewer/lazy.tsx",
+      "import": "./src/tools/dev/api/OpenapiViewer/lazy.tsx",
+      "require": "./src/tools/dev/api/OpenapiViewer/lazy.tsx"
+    },
+    "./request-viewer": {
+      "types": "./src/tools/dev/api/RequestViewer/index.ts",
+      "import": "./src/tools/dev/api/RequestViewer/index.ts",
+      "require": "./src/tools/dev/api/RequestViewer/index.ts"
     },
     "./pretty-code": {
-      "types": "./src/tools/dev/PrettyCode/lazy.tsx",
-      "import": "./src/tools/dev/PrettyCode/lazy.tsx",
-      "require": "./src/tools/dev/PrettyCode/lazy.tsx"
+      "types": "./src/tools/dev/code/PrettyCode/lazy.tsx",
+      "import": "./src/tools/dev/code/PrettyCode/lazy.tsx",
+      "require": "./src/tools/dev/code/PrettyCode/lazy.tsx"
+    },
+    "./diff-viewer": {
+      "types": "./src/tools/dev/code/DiffViewer/lazy.tsx",
+      "import": "./src/tools/dev/code/DiffViewer/lazy.tsx",
+      "require": "./src/tools/dev/code/DiffViewer/lazy.tsx"
+    },
+    "./diff-viewer/full": {
+      "types": "./src/tools/dev/code/DiffViewer/index.ts",
+      "import": "./src/tools/dev/code/DiffViewer/index.ts",
+      "require": "./src/tools/dev/code/DiffViewer/index.ts"
     },
     "./video-player": {
       "types": "./src/tools/media/VideoPlayer/lazy.tsx",
@@ -177,9 +202,14 @@
       "require": "./src/tools/input/Combobox/index.ts"
     },
     "./color-picker": {
-      "types": "./src/tools/visual/ColorPicker/index.ts",
-      "import": "./src/tools/visual/ColorPicker/index.ts",
-      "require": "./src/tools/visual/ColorPicker/index.ts"
+      "types": "./src/tools/visual/design/ColorPicker/index.ts",
+      "import": "./src/tools/visual/design/ColorPicker/index.ts",
+      "require": "./src/tools/visual/design/ColorPicker/index.ts"
+    },
+    "./color-palette": {
+      "types": "./src/tools/visual/design/ColorPalette/index.ts",
+      "import": "./src/tools/visual/design/ColorPalette/index.ts",
+      "require": "./src/tools/visual/design/ColorPalette/index.ts"
     },
     "./file-upload": {
       "types": "./src/tools/forms/FileUpload/index.ts",
@@ -187,14 +217,14 @@
       "require": "./src/tools/forms/FileUpload/index.ts"
     },
     "./fps": {
-      "types": "./src/tools/visual/Fps/index.ts",
-      "import": "./src/tools/visual/Fps/index.ts",
-      "require": "./src/tools/visual/Fps/index.ts"
+      "types": "./src/tools/visual/indicators/Fps/index.ts",
+      "import": "./src/tools/visual/indicators/Fps/index.ts",
+      "require": "./src/tools/visual/indicators/Fps/index.ts"
     },
     "./gauge": {
-      "types": "./src/tools/visual/Gauge/index.ts",
-      "import": "./src/tools/visual/Gauge/index.ts",
-      "require": "./src/tools/visual/Gauge/index.ts"
+      "types": "./src/tools/visual/charts/Gauge/index.ts",
+      "import": "./src/tools/visual/charts/Gauge/index.ts",
+      "require": "./src/tools/visual/charts/Gauge/index.ts"
     },
     "./marquee": {
       "types": "./src/tools/visual/Marquee/index.ts",
@@ -206,10 +236,50 @@
       "import": "./src/tools/visual/QRCode/index.ts",
       "require": "./src/tools/visual/QRCode/index.ts"
     },
+    "./status-indicator": {
+      "types": "./src/tools/visual/indicators/StatusIndicator/index.ts",
+      "import": "./src/tools/visual/indicators/StatusIndicator/index.ts",
+      "require": "./src/tools/visual/indicators/StatusIndicator/index.ts"
+    },
+    "./api-ref-table": {
+      "types": "./src/tools/dev/api/ApiRefTable/index.ts",
+      "import": "./src/tools/dev/api/ApiRefTable/index.ts",
+      "require": "./src/tools/dev/api/ApiRefTable/index.ts"
+    },
+    "./env-table": {
+      "types": "./src/tools/dev/ops/EnvTable/index.ts",
+      "import": "./src/tools/dev/ops/EnvTable/index.ts",
+      "require": "./src/tools/dev/ops/EnvTable/index.ts"
+    },
+    "./log-viewer": {
+      "types": "./src/tools/dev/ops/LogViewer/lazy.tsx",
+      "import": "./src/tools/dev/ops/LogViewer/lazy.tsx",
+      "require": "./src/tools/dev/ops/LogViewer/lazy.tsx"
+    },
+    "./log-viewer/full": {
+      "types": "./src/tools/dev/ops/LogViewer/index.ts",
+      "import": "./src/tools/dev/ops/LogViewer/index.ts",
+      "require": "./src/tools/dev/ops/LogViewer/index.ts"
+    },
+    "./activity-graph": {
+      "types": "./src/tools/visual/charts/ActivityGraph/index.ts",
+      "import": "./src/tools/visual/charts/ActivityGraph/index.ts",
+      "require": "./src/tools/visual/charts/ActivityGraph/index.ts"
+    },
+    "./commit-graph": {
+      "types": "./src/tools/visual/charts/CommitGraph/index.ts",
+      "import": "./src/tools/visual/charts/CommitGraph/index.ts",
+      "require": "./src/tools/visual/charts/CommitGraph/index.ts"
+    },
+    "./sparkline": {
+      "types": "./src/tools/visual/charts/Sparkline/index.ts",
+      "import": "./src/tools/visual/charts/Sparkline/index.ts",
+      "require": "./src/tools/visual/charts/Sparkline/index.ts"
+    },
     "./rating": {
-      "types": "./src/tools/visual/Rating/index.ts",
-      "import": "./src/tools/visual/Rating/index.ts",
-      "require": "./src/tools/visual/Rating/index.ts"
+      "types": "./src/tools/visual/indicators/Rating/index.ts",
+      "import": "./src/tools/visual/indicators/Rating/index.ts",
+      "require": "./src/tools/visual/indicators/Rating/index.ts"
     },
     "./listbox": {
       "types": "./src/tools/data/Listbox/index.ts",
@@ -259,8 +329,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.417",
-    "@djangocfg/ui-core": "^2.1.417",
+    "@djangocfg/i18n": "^2.1.419",
+    "@djangocfg/ui-core": "^2.1.419",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -279,14 +349,25 @@
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
     "@rpldy/uploady": "^1.8.5",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/extension-mention": "^3.20.1",
-    "@tiptap/extension-placeholder": "^3.20.1",
-    "@tiptap/markdown": "^3.20.1",
-    "@tiptap/pm": "^3.20.1",
-    "@tiptap/react": "^3.20.1",
-    "@tiptap/starter-kit": "^3.20.1",
-    "@tiptap/suggestion": "^3.20.1",
+    "@tiptap/core": "^3.23.0",
+    "@tiptap/extension-bubble-menu": "^3.23.0",
+    "@tiptap/extension-code-block-lowlight": "^3.23.0",
+    "@tiptap/extension-highlight": "^3.23.0",
+    "@tiptap/extension-mention": "^3.23.0",
+    "@tiptap/extension-placeholder": "^3.23.0",
+    "@tiptap/extension-table": "^3.23.0",
+    "@tiptap/extension-table-cell": "^3.23.0",
+    "@tiptap/extension-table-header": "^3.23.0",
+    "@tiptap/extension-table-row": "^3.23.0",
+    "@tiptap/extension-task-item": "^3.23.0",
+    "@tiptap/extension-task-list": "^3.23.0",
+    "@tiptap/markdown": "^3.23.0",
+    "@tiptap/pm": "^3.23.0",
+    "@tiptap/react": "^3.23.0",
+    "@tiptap/starter-kit": "^3.23.0",
+    "@tiptap/suggestion": "^3.23.0",
+    "lowlight": "^3.3.0",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
     "@wavesurfer/react": "^1.0.12",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-direction": "^1.1.1",
@@ -300,7 +381,7 @@
     "openapi-sampler": "^1.7.2",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
-    "react-json-tree": "^0.20.0",
+    "json-edit-react": "^1.30.1",
     "react-lottie-player": "^2.1.0",
     "react-map-gl": "^8.1.0",
     "react-markdown": "10.1.0",
@@ -324,9 +405,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.417",
-    "@djangocfg/typescript-config": "^2.1.417",
-    "@djangocfg/ui-core": "^2.1.417",
+    "@djangocfg/i18n": "^2.1.419",
+    "@djangocfg/typescript-config": "^2.1.419",
+    "@djangocfg/ui-core": "^2.1.419",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",

package/src/common/FloatingToolbar/actions/CopyAction.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import {
+  CopyButton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@djangocfg/ui-core/components';
+
+interface CopyActionProps {
+  value: string;
+  title?: string;
+}
+
+const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border border-border/50 backdrop-blur-sm';
+
+export const CopyAction: React.FC<CopyActionProps> = ({ value, title = 'Copy' }) => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <CopyButton
+        value={value}
+        variant="ghost"
+        size="icon"
+        className={BUTTON_CLASS}
+        iconClassName="h-3 w-3"
+      />
+    </TooltipTrigger>
+    <TooltipContent side="top">{title}</TooltipContent>
+  </Tooltip>
+);

package/src/{components → common}/FloatingToolbar/actions/DownloadAction.tsx

@@ -3,7 +3,7 @@
 import { Download } from 'lucide-react';
 import React from 'react';
 
-import { Button } from '@djangocfg/ui-core/components';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components';
 
 interface DownloadActionProps {
   value: string;
@@ -33,14 +33,19 @@ export const DownloadAction: React.FC<DownloadActionProps> = ({
   };
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={handleDownload}
-      className={BUTTON_CLASS}
-      title={title}
-    >
-      <Download className="h-3 w-3" />
-    </Button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDownload}
+          aria-label={title}
+          className={BUTTON_CLASS}
+        >
+          <Download className="h-3 w-3" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{title}</TooltipContent>
+    </Tooltip>
   );
 };

package/src/common/FloatingToolbar/actions/ExpandAction.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import React from 'react';
+
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components';
+
+interface ExpandActionProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border border-border/50 backdrop-blur-sm';
+
+export const ExpandAction: React.FC<ExpandActionProps> = ({ isExpanded, onToggle }) => {
+  const label = isExpanded ? 'Collapse All' : 'Expand All';
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggle}
+          aria-label={label}
+          className={BUTTON_CLASS}
+        >
+          {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+};

package/src/common/FloatingToolbar/actions/FullscreenAction.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Maximize2, Minimize2 } from 'lucide-react';
+import React from 'react';
+
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components';
+
+interface FullscreenActionProps {
+  isFullscreen?: boolean;
+  onToggle: () => void;
+  title?: string;
+}
+
+const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border border-border/50 backdrop-blur-sm';
+
+export const FullscreenAction: React.FC<FullscreenActionProps> = ({
+  isFullscreen = false,
+  onToggle,
+  title,
+}) => {
+  const label = title ?? (isFullscreen ? 'Exit fullscreen' : 'Fullscreen');
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggle}
+          aria-label={label}
+          className={BUTTON_CLASS}
+        >
+          {isFullscreen ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+};

package/src/{components → common}/FloatingToolbar/index.tsx

@@ -53,6 +53,13 @@ export interface FloatingToolbarProps {
    * @default true
    */
   scrollIsolation?: boolean;
+  /**
+   * Hide the toolbar until the user hovers the container. ChatGPT /
+   * GitHub-style: chrome stays out of the way, appears on demand.
+   * Keyboard focus inside the container also reveals it (a11y).
+   * @default false (always visible — back-compat)
+   */
+  autoHide?: boolean;
 }
 
 /**
@@ -67,6 +74,7 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
   offset = 8,
   zIndex = 30,
   scrollIsolation = true,
+  autoHide = false,
 }) => {
   // Isolation only engages when the container can actually scroll —
   // a block that fully fits never shows the "Click to scroll" overlay.
@@ -76,6 +84,29 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
   const { locked, unlock } = useScrollIsolation(containerRef, isolationActive);
   const [overlayHovered, setOverlayHovered] = useState(false);
 
+  // Track container hover + focus for ChatGPT-style auto-hide. We watch
+  // `mouseenter/leave` and `focusin/out` on the container so keyboard
+  // users still see the toolbar — `:hover` alone would hide it from
+  // them entirely.
+  const [containerActive, setContainerActive] = useState(false);
+  useEffect(() => {
+    if (!autoHide) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const enter = () => setContainerActive(true);
+    const leave = () => setContainerActive(false);
+    el.addEventListener('mouseenter', enter);
+    el.addEventListener('mouseleave', leave);
+    el.addEventListener('focusin', enter);
+    el.addEventListener('focusout', leave);
+    return () => {
+      el.removeEventListener('mouseenter', enter);
+      el.removeEventListener('mouseleave', leave);
+      el.removeEventListener('focusin', enter);
+      el.removeEventListener('focusout', leave);
+    };
+  }, [autoHide, containerRef]);
+
   const overlay =
     isolationActive && locked ? (
       <div
@@ -117,6 +148,11 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
       ? { bottom: offset, right: offset }
       : { top: offset, right: offset };
 
+  // Auto-hide: invisible until the container is hovered or has keyboard
+  // focus inside. Opacity transition keeps the reveal smooth instead of
+  // popping. `pointer-events: none` while hidden so the toolbar doesn't
+  // intercept clicks on whatever sits behind it.
+  const hidden = autoHide && !containerActive;
   const toolbar = (
     <div
       className="flex items-center gap-1"
@@ -124,6 +160,9 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
         position: 'absolute',
         ...positionStyle,
         zIndex,
+        opacity: hidden ? 0 : 1,
+        pointerEvents: hidden ? 'none' : undefined,
+        transition: 'opacity 120ms ease-out',
       }}
     >
       {label && (

package/src/lib/http.ts

@@ -0,0 +1,64 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+//
+// HTTP semantic-token helpers shared between RequestViewer, OpenapiViewer,
+// LogViewer, and any other tool that visualizes HTTP traffic.
+//
+// IMPORTANT: these helpers return semantic token *names*, not Tailwind
+// classes or hex colors. Consumers map the token to their own surface
+// (e.g. `bg-success/15 text-success` vs `border-success-border`). This
+// keeps the mapping consistent across tools and theme presets.
+//
+// Source pattern: request-viewer.tsx:70-92.
+
+export type HttpStatusTone =
+  | 'success'      // 2xx
+  | 'info'         // 3xx
+  | 'warning'      // 4xx
+  | 'destructive'  // 5xx
+  | 'muted';       // unknown / 1xx
+
+export type HttpMethodTone =
+  | 'success'      // GET
+  | 'info'         // POST
+  | 'warning'      // PUT / PATCH
+  | 'destructive'  // DELETE
+  | 'muted';       // OPTIONS / HEAD / unknown
+
+/**
+ * Map an HTTP status code to a semantic token name.
+ *
+ * @example
+ *   statusColor(204) // 'success'
+ *   statusColor(404) // 'warning'
+ *   statusColor(503) // 'destructive'
+ */
+export function statusColor(status: number): HttpStatusTone {
+  if (status >= 200 && status < 300) return 'success';
+  if (status >= 300 && status < 400) return 'info';
+  if (status >= 400 && status < 500) return 'warning';
+  if (status >= 500) return 'destructive';
+  return 'muted';
+}
+
+/**
+ * Map an HTTP method to a semantic token name. Case-insensitive.
+ *
+ * @example
+ *   methodColor('GET')    // 'success'
+ *   methodColor('delete') // 'destructive'
+ */
+export function methodColor(method: string): HttpMethodTone {
+  switch (method.toUpperCase()) {
+    case 'GET':
+      return 'success';
+    case 'POST':
+      return 'info';
+    case 'PUT':
+    case 'PATCH':
+      return 'warning';
+    case 'DELETE':
+      return 'destructive';
+    default:
+      return 'muted';
+  }
+}

package/src/tools/chat/index.ts

@@ -115,4 +115,4 @@ export {
   extractTextFromChildren,
   type MarkdownMessageProps,
   type LinkRule,
-} from '../dev/MarkdownMessage';
+} from '../dev/code/MarkdownMessage';