@djangocfg/ui-tools 2.1.418 → 2.1.420

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.418",
+  "version": "2.1.420",
   "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",
@@ -122,19 +127,34 @@
       "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",
@@ -182,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",
@@ -192,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",
@@ -211,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",
@@ -264,8 +329,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.418",
-    "@djangocfg/ui-core": "^2.1.418",
+    "@djangocfg/i18n": "^2.1.420",
+    "@djangocfg/ui-core": "^2.1.420",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -316,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",
@@ -340,9 +405,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.418",
-    "@djangocfg/typescript-config": "^2.1.418",
-    "@djangocfg/ui-core": "^2.1.418",
+    "@djangocfg/i18n": "^2.1.420",
+    "@djangocfg/typescript-config": "^2.1.420",
+    "@djangocfg/ui-core": "^2.1.420",
     "@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';

package/src/tools/chat/launcher/ChatFAB.tsx

@@ -5,6 +5,11 @@ import type { CSSProperties, ReactNode } from 'react';
 
 import { useIsPhone, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@djangocfg/ui-core/components';
 
 import { Z_INDEX } from '../constants';
 
@@ -80,11 +85,9 @@ function positionStyle(position: ChatFABPosition, offset: number): CSSProperties
   return { [vert]: offset, [horiz]: offset } as CSSProperties;
 }
 
-function tooltipSideClasses(position: ChatFABPosition): string {
+function tooltipSide(position: ChatFABPosition): 'left' | 'right' {
   // Tooltip sits opposite-horizontal to the FAB so it doesn't run off-screen.
-  return position.endsWith('right')
-    ? 'right-full mr-3 origin-right'
-    : 'left-full ml-3 origin-left';
+  return position.endsWith('right') ? 'left' : 'right';
 }
 
 function Badge({ value }: { value: number }) {
@@ -114,24 +117,6 @@ function PulseDot() {
   );
 }
 
-function Tooltip({ text, side }: { text: string; side: string }) {
-  return (
-    <span
-      role="tooltip"
-      className={cn(
-        'pointer-events-none absolute top-1/2 -translate-y-1/2 whitespace-nowrap',
-        'rounded-md bg-popover px-2.5 py-1 text-xs font-medium text-popover-foreground shadow-md',
-        'border border-border opacity-0 scale-95 transition-all duration-150',
-        'group-hover:opacity-100 group-hover:scale-100',
-        'group-focus-within:opacity-100 group-focus-within:scale-100',
-        side,
-      )}
-    >
-      {text}
-    </span>
-  );
-}
-
 /**
  * Floating action button for opening a chat dock. Pure presentation — owns
  * no state. Wire it to whatever toggles your dock open.
@@ -165,65 +150,72 @@ export function ChatFAB({
     'transition-transform hover:scale-105',
   );
 
-  return (
+  const fabNode =
+    variant === 'animated' ? (
+      <AnimatedFAB
+        ariaLabel={ariaLabel}
+        onClick={onClick}
+        size={px}
+        className={className}
+        style={style}
+      >
+        {renderedIcon}
+      </AnimatedFAB>
+    ) : variant === 'glass' ? (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        onClick={onClick}
+        className={cn(
+          baseButton,
+          'border border-border/40 bg-background/60 text-foreground shadow-lg backdrop-blur-xl',
+          'hover:bg-background/80',
+          className,
+        )}
+        style={{ width: px, height: px, ...style }}
+      >
+        {renderedIcon}
+        {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
+      </button>
+    ) : (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        onClick={onClick}
+        className={cn(
+          baseButton,
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xl',
+          className,
+        )}
+        style={{ width: px, height: px, ...style }}
+      >
+        {renderedIcon}
+        {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
+      </button>
+    );
+
+  // Wrap in our Tooltip when a tooltip label is provided. Animated variant
+  // ships a wrapping <div>, so we mount the Tooltip on the FAB node directly
+  // rather than relying on `asChild` forwarding through that wrapper.
+  const positioned = (
     <div
-      className={cn('group', inline ? 'relative inline-flex' : 'fixed')}
+      className={inline ? 'relative inline-flex' : 'fixed'}
       style={
-        inline
-          ? undefined
-          : { ...positionStyle(position, offset), zIndex }
+        inline ? undefined : { ...positionStyle(position, offset), zIndex }
       }
     >
-      {variant === 'animated' && (
-        <AnimatedFAB
-          ariaLabel={ariaLabel}
-          onClick={onClick}
-          size={px}
-          className={className}
-          style={style}
-        >
-          {renderedIcon}
-        </AnimatedFAB>
-      )}
-
-      {variant === 'glass' && (
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          onClick={onClick}
-          className={cn(
-            baseButton,
-            'border border-border/40 bg-background/60 text-foreground shadow-lg backdrop-blur-xl',
-            'hover:bg-background/80',
-            className,
-          )}
-          style={{ width: px, height: px, ...style }}
-        >
-          {renderedIcon}
-          {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
-        </button>
-      )}
-
-      {variant === 'simple' && (
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          onClick={onClick}
-          className={cn(
-            baseButton,
-            'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xl',
-            className,
-          )}
-          style={{ width: px, height: px, ...style }}
-        >
-          {renderedIcon}
-          {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
-        </button>
+      {tooltip ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{fabNode}</TooltipTrigger>
+          <TooltipContent side={tooltipSide(position)}>{tooltip}</TooltipContent>
+        </Tooltip>
+      ) : (
+        fabNode
       )}
-
-      {tooltip && <Tooltip text={tooltip} side={tooltipSideClasses(position)} />}
     </div>
   );
+
+  return positioned;
 }
 
 // ── Animated variant ──────────────────────────────────────────────────────