@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Chat/components/Composer.tsx

@@ -1,216 +0,0 @@
-'use client';
-
-import { type ReactNode, forwardRef, useEffect, useRef } from 'react';
-import { Paperclip, Send, Square } from 'lucide-react';
-
-import { Button, Textarea } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useChatContextOptional } from '../context';
-import type { UseChatComposerReturn } from '../hooks/useChatComposer';
-import { Attachments } from './Attachments';
-
-export type ComposerSize = 'sm' | 'md' | 'lg';
-
-export interface ComposerProps {
-  composer: UseChatComposerReturn;
-  placeholder?: string;
-  disabled?: boolean;
-  showAttachmentButton?: boolean;
-  onPickFiles?: () => void;
-  toolbarStart?: ReactNode;
-  toolbarEnd?: ReactNode;
-  attachmentTray?: ReactNode;
-  className?: string;
-  textareaClassName?: string;
-  /** Visual size — controls textarea height + button slot size.
-   *
-   * - ``sm``  — 32px slot, dense compact composer (admin sidebars, etc).
-   * - ``md``  — 36px slot, default. Same as the legacy fixed size.
-   * - ``lg``  — 48px slot, generous textarea. Use when the chat is
-   *   the page's primary surface (onboarding, support).
-   */
-  size?: ComposerSize;
-  /** Show "Stop" button instead of "Send" while streaming. */
-  isStreaming?: boolean;
-  onCancel?: () => void;
-}
-
-const SIZE_CLASSES: Record<ComposerSize, {
-  slot: string;
-  button: string;
-  iconButton: string;
-  textarea: string;
-  text: string;
-  padding: string;
-  containerPadding: string;
-}> = {
-  sm: {
-    slot: '[&>:not(textarea)]:h-8',
-    button: 'h-8 w-8',
-    iconButton: 'size-3.5',
-    textarea: 'min-h-8 max-h-48 px-3 py-1.5',
-    text: 'text-sm',
-    padding: 'gap-1.5',
-    containerPadding: 'px-2 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]',
-  },
-  md: {
-    slot: '[&>:not(textarea)]:h-9',
-    button: 'h-9 w-9',
-    iconButton: 'size-4',
-    textarea: 'min-h-9 max-h-60 px-3.5 py-2',
-    text: 'text-base sm:text-sm',
-    padding: 'gap-1.5',
-    containerPadding: 'px-2.5 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]',
-  },
-  lg: {
-    slot: '[&>:not(textarea)]:h-12',
-    button: 'h-12 w-12',
-    iconButton: 'size-5',
-    textarea: 'min-h-12 max-h-72 px-4 py-3',
-    text: 'text-base',
-    padding: 'gap-2',
-    containerPadding: 'px-3.5 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]',
-  },
-};
-
-export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Composer(
-  {
-    composer,
-    placeholder = 'Type a message...',
-    disabled,
-    showAttachmentButton = false,
-    onPickFiles,
-    toolbarStart,
-    toolbarEnd,
-    attachmentTray,
-    className,
-    textareaClassName,
-    size = 'md',
-    isStreaming: isStreamingProp,
-    onCancel: onCancelProp,
-  },
-  ref,
-) {
-  const ctx = useChatContextOptional();
-  const isStreaming = isStreamingProp ?? ctx?.isStreaming ?? false;
-  const onCancel = onCancelProp ?? ctx?.cancelStream;
-  const isDisabled = disabled ?? isStreaming;
-  const sz = SIZE_CLASSES[size];
-
-  // Register the composer's focus() with the chat context so other
-  // parts of the tree (e.g. useAutoFocusOnStreamEnd) can drive it
-  // imperatively without prop-drilling a ref. No-op when used outside
-  // a ChatProvider.
-  const register = ctx?.registerComposer;
-  const composerFocus = composer.focus;
-  const composerSetValue = composer.setValue;
-  const textareaRef = composer.textareaRef;
-  // `getValue` reads the live ref instead of closing over `composer.value`
-  // so we don't need to re-register on every keystroke. Same trick for
-  // `setValue` — handler identity stays stable across renders.
-  const getValueRef = useRef<() => string>(() => composer.value);
-  getValueRef.current = () => composer.value;
-  useEffect(() => {
-    if (!register) return;
-    register({
-      focus: composerFocus,
-      moveCursorToEnd: () => {
-        const el = textareaRef.current;
-        if (!el) return;
-        const end = el.value.length;
-        el.setSelectionRange(end, end);
-      },
-      getValue: () => getValueRef.current(),
-      setValue: composerSetValue,
-    });
-    return () => register(null);
-  }, [register, composerFocus, composerSetValue, textareaRef]);
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'border-t border-border bg-background/95',
-        sz.containerPadding,
-        className,
-      )}
-    >
-      {composer.attachments.length > 0 ? (
-        <div className="mb-1.5">
-          {attachmentTray ?? (
-            <Attachments
-              attachments={composer.attachments}
-              onRemove={(a) => composer.removeAttachment(a.id)}
-            />
-          )}
-        </div>
-      ) : null}
-
-      {/* Size-aware slot row. ``[&>:not(textarea)]:h-{N}`` enforces a
-       *   consistent slot height so toolbar buttons line up with the
-       *   textarea baseline. Toolbar slots that want to opt out can
-       *   pass an explicit class like `!h-auto`. */}
-      <div className={cn('flex items-end [&>:not(textarea)]:shrink-0', sz.padding, sz.slot)}>
-        {showAttachmentButton ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={onPickFiles}
-            aria-label="Attach files"
-            disabled={isDisabled}
-            className={sz.button}
-          >
-            <Paperclip aria-hidden className={sz.iconButton} />
-          </Button>
-        ) : null}
-
-        {toolbarStart}
-
-        <Textarea
-          {...composer.textareaProps}
-          rows={1}
-          placeholder={placeholder}
-          aria-label={placeholder}
-          aria-multiline="true"
-          disabled={isDisabled}
-          className={cn(
-            'flex-1 resize-none rounded-2xl',
-            sz.textarea,
-            sz.text,
-            textareaClassName,
-          )}
-        />
-
-        {toolbarEnd}
-
-        {isStreaming ? (
-          <Button
-            type="button"
-            variant="secondary"
-            size="icon"
-            onClick={onCancel}
-            aria-label="Stop"
-            aria-keyshortcuts="Escape"
-            className={sz.button}
-          >
-            <Square aria-hidden className={sz.iconButton} />
-          </Button>
-        ) : (
-          <Button
-            type="button"
-            size="icon"
-            onClick={() => void composer.submit()}
-            disabled={!composer.canSubmit}
-            aria-label="Send"
-            aria-keyshortcuts="Enter"
-            className={sz.button}
-          >
-            <Send aria-hidden className={sz.iconButton} />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-});

package/src/tools/Chat/hooks/useChatScroll.ts

@@ -1,145 +0,0 @@
-'use client';
-
-import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
-
-/**
- * @deprecated Plan64. As of ui-tools 2.1.369, `<MessageList>` is
- * virtualized via react-virtuoso and owns its own scroll viewport.
- * Sticky-bottom + auto-follow on streaming live inside the component;
- * use the new `MessageListProps.onAtBottomChange` prop and the
- * `MessageListHandle.scrollToBottom()` imperative method instead.
- *
- * This hook is kept for hosts that render messages outside
- * `<MessageList>` (e.g. headless story shells, custom non-virtualized
- * scroll containers). It still works against any HTMLElement scroll
- * container, but it does NOT integrate with Virtuoso — passing a
- * Virtuoso-managed element here will read garbage scroll metrics.
- */
-export interface UseChatScrollOptions {
-  containerRef: RefObject<HTMLElement | null>;
-  bottomRef: RefObject<HTMLElement | null>;
-  isStreaming?: boolean;
-  /** Distance from bottom (px) considered "at bottom". */
-  bottomThresholdPx?: number;
-  /** Bump key — increment when a new message arrives so the hook re-evaluates auto-scroll. */
-  messagesCount?: number;
-}
-
-export interface UseChatScrollReturn {
-  isAtBottom: boolean;
-  unreadCount: number;
-  scrollToBottom: (smooth?: boolean) => void;
-  resetUnread: () => void;
-}
-
-export function useChatScroll(options: UseChatScrollOptions): UseChatScrollReturn {
-  const {
-    containerRef,
-    bottomRef,
-    isStreaming = false,
-    bottomThresholdPx = 80,
-    messagesCount = 0,
-  } = options;
-
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const lastCountRef = useRef(messagesCount);
-  const stickyRef = useRef(true);
-  const wasStreamingRef = useRef(isStreaming);
-
-  const scrollToBottom = useCallback(
-    (smooth = false) => {
-      const el = containerRef.current;
-      if (!el) return;
-      el.scrollTo({
-        top: el.scrollHeight,
-        behavior: smooth ? 'smooth' : 'auto',
-      });
-      stickyRef.current = true;
-      setIsAtBottom(true);
-      setUnreadCount(0);
-    },
-    [containerRef],
-  );
-
-  const resetUnread = useCallback(() => setUnreadCount(0), []);
-
-  // Track scroll position relative to bottom.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onScroll = () => {
-      const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-      const atBottom = distance <= bottomThresholdPx;
-      stickyRef.current = atBottom;
-      setIsAtBottom(atBottom);
-      if (atBottom) setUnreadCount(0);
-    };
-    onScroll();
-    el.addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-      el.removeEventListener('scroll', onScroll);
-    };
-  }, [containerRef, bottomThresholdPx]);
-
-  // Stick to bottom while streaming, and one extra rAF after stream ends so
-  // the final layout (markdown re-render, sources/tool-call panels) doesn't
-  // push the latest content out of view.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    if (isStreaming) {
-      wasStreamingRef.current = true;
-      if (!stickyRef.current) return;
-      let raf = 0;
-      const tick = () => {
-        if (!stickyRef.current) return;
-        el.scrollTop = el.scrollHeight;
-        raf = requestAnimationFrame(tick);
-      };
-      raf = requestAnimationFrame(tick);
-      return () => cancelAnimationFrame(raf);
-    }
-
-    // Stream just ended — flush one more scroll on the next two frames so
-    // both markdown swap and any post-stream panel insertions are reflected.
-    if (wasStreamingRef.current && stickyRef.current) {
-      wasStreamingRef.current = false;
-      let raf1 = 0;
-      let raf2 = 0;
-      raf1 = requestAnimationFrame(() => {
-        el.scrollTop = el.scrollHeight;
-        raf2 = requestAnimationFrame(() => {
-          el.scrollTop = el.scrollHeight;
-        });
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
-    }
-    wasStreamingRef.current = false;
-    return;
-  }, [containerRef, isStreaming]);
-
-  // On message count increase, decide whether to scroll or bump unread.
-  useEffect(() => {
-    if (messagesCount > lastCountRef.current) {
-      if (stickyRef.current) {
-        const el = containerRef.current;
-        if (el) el.scrollTop = el.scrollHeight;
-      } else {
-        setUnreadCount((n) => n + (messagesCount - lastCountRef.current));
-      }
-    }
-    lastCountRef.current = messagesCount;
-  }, [containerRef, messagesCount]);
-
-  // Watch bottom sentinel just for symmetry/future hooks.
-  useEffect(() => {
-    void bottomRef;
-  }, [bottomRef]);
-
-  return { isAtBottom, unreadCount, scrollToBottom, resetUnread };
-}

package/src/tools/Chat/types.ts

@@ -1,9 +0,0 @@
-/**
- * Backwards-compatibility re-export.
- *
- * Types live in `./types/` (one file per domain). Import directly from
- * `@djangocfg/ui-tools/Chat` in new code; this barrel exists so old
- * `import … from '.../types'` paths keep working.
- */
-
-export * from './types/index';

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

@@ -1,95 +0,0 @@
-'use client';
-
-import { ChevronDown, ChevronUp, Download } from 'lucide-react';
-import React, { memo } from 'react';
-
-import { Button, CopyButton } from '@djangocfg/ui-core/components';
-
-interface JsonToolbarProps {
-  /** Viewport right coordinate (distance from right edge) for fixed positioning */
-  right: number;
-  /** Bottom edge of the container in viewport coords */
-  bottom: number;
-  /** Top edge — used only to detect if block is fully off-screen */
-  top: number;
-  isExpanded: boolean;
-  onToggleExpand: () => void;
-  jsonString: string;
-  onDownload: () => void;
-  showExpandControls: boolean;
-  showActionButtons: boolean;
-}
-
-const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border border-border/50 backdrop-blur-sm';
-const TOOLBAR_H = 24 + 8 + 8;
-const OFFSET = 8;
-
-/**
- * JsonToolbar — floating toolbar for JsonTree.
- *
- * Memoised: re-renders only when any prop changes. Position props
- * (`top`, `right`, `bottom`) are primitives, so default shallow
- * comparison is sufficient.
- */
-const JsonToolbar = memo(({
-  top,
-  right,
-  bottom,
-  isExpanded,
-  onToggleExpand,
-  jsonString,
-  onDownload,
-  showExpandControls,
-  showActionButtons,
-}: JsonToolbarProps) => {
-  const viewportHeight = window.visualViewport?.height ?? document.documentElement.clientHeight;
-
-  // Hide when block is fully above or below viewport
-  if (bottom <= 0 || top >= viewportHeight) return null;
-  // Hide when block is too small to fit toolbar
-  if (bottom - top < TOOLBAR_H) return null;
-
-  // Anchor to bottom-right of block, clamped so toolbar stays in viewport
-  const toolbarBottom = Math.min(bottom - OFFSET, viewportHeight - OFFSET);
-
-  return (
-    <div
-      className="flex items-center gap-1"
-      style={{ position: 'fixed', bottom: viewportHeight - toolbarBottom, right: right + OFFSET, zIndex: 30 }}
-    >
-      {showExpandControls && (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onToggleExpand}
-          className={BUTTON_CLASS}
-          title={isExpanded ? 'Collapse All' : 'Expand All'}
-        >
-          {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-        </Button>
-      )}
-
-      {showActionButtons && (
-        <>
-          <CopyButton
-            value={jsonString}
-            variant="ghost"
-            size="icon"
-            className={BUTTON_CLASS}
-            iconClassName="h-3 w-3"
-            title="Copy JSON"
-          />
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onDownload}
-            className={BUTTON_CLASS}
-            title="Download JSON"
-          >
-            <Download className="h-3 w-3" />
-          </Button>
-        </>
-      )}
-    </div>
-  );
-});

package/src/tools/JsonTree/hooks/useElementCorner.ts

@@ -1,84 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-interface Corner {
-  top: number;
-  right: number;
-  bottom: number;
-}
-
-/**
- * Tracks the top-right corner of a referenced element in viewport coordinates.
- * Returns { top, right } in px — ready for `position: fixed` toolbar placement.
- *
- * Uses `visualViewport` for accurate viewport width — correctly handles:
- * - DevTools panel open (docked left/right/bottom)
- * - Browser zoom
- * - Mobile virtual keyboard / pinch-zoom
- * - Scrollbars
- *
- * Falls back to `document.documentElement.clientWidth` (excludes scrollbars,
- * matches `position: fixed` coordinate space) when visualViewport is unavailable.
- *
- * Updates on:
- * - Any ancestor scroll (capture phase)
- * - visualViewport resize/scroll
- * - ResizeObserver on the element itself
- */
-export function useElementCorner(ref: React.RefObject<HTMLElement | null>) {
-  const [corner, setCorner] = useState<Corner | null>(null);
-  const updateRef = useRef<() => void>(() => {});
-
-  updateRef.current = () => {
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-
-    // `position: fixed` is relative to the layout viewport (document.documentElement.clientWidth),
-    // NOT window.innerWidth (which includes scrollbar gutter).
-    // visualViewport.width is the visible area — same as layout viewport when no zoom/keyboard.
-    const viewportWidth =
-      window.visualViewport?.width ?? document.documentElement.clientWidth;
-
-    setCorner({
-      top: rect.top,
-      right: viewportWidth - rect.right,
-      bottom: rect.bottom,
-    });
-  };
-
-  useEffect(() => {
-    const handler = () => updateRef.current();
-
-    handler();
-
-    // Element size changes
-    const ro = new ResizeObserver(handler);
-    if (ref.current) ro.observe(ref.current);
-
-    // Any ancestor scroll (capture catches all, including overflow:auto containers)
-    window.addEventListener('scroll', handler, { capture: true, passive: true });
-
-    // visualViewport handles: DevTools resize, browser zoom, mobile keyboard
-    const vv = window.visualViewport;
-    if (vv) {
-      vv.addEventListener('resize', handler);
-      vv.addEventListener('scroll', handler);
-    } else {
-      window.addEventListener('resize', handler, { passive: true });
-    }
-
-    return () => {
-      ro.disconnect();
-      window.removeEventListener('scroll', handler, { capture: true });
-      if (vv) {
-        vv.removeEventListener('resize', handler);
-        vv.removeEventListener('scroll', handler);
-      } else {
-        window.removeEventListener('resize', handler);
-      }
-    };
-  }, [ref]);
-
-  return corner;
-}

package/src/tools/JsonTree/hooks/useNavbarHeight.ts

@@ -1,83 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-/**
- * Detects the height of any element covering the top of the viewport.
- *
- * Strategy: uses elementFromPoint() along the top of the viewport to find
- * whatever is actually rendered there — fixed, sticky, or in-flow elements.
- * Walks up the DOM from the hit element to find the topmost covering block.
- *
- * Performance:
- * - Samples a few x-points across the viewport top (not the whole width)
- * - Throttled with requestAnimationFrame
- * - Only re-runs on resize (navbars rarely change height on scroll)
- */
-
-const SAMPLE_POINTS = 5; // how many x positions to probe across viewport
-
-function measureNavbarHeight(): number {
-  const vv = window.visualViewport;
-  const viewportWidth = vv?.width ?? document.documentElement.clientWidth;
-
-  let maxBottom = 0;
-
-  for (let i = 0; i < SAMPLE_POINTS; i++) {
-    const x = (viewportWidth / (SAMPLE_POINTS + 1)) * (i + 1);
-
-    // Probe just below the very top — y=1 to avoid hitting browser chrome
-    const el = document.elementFromPoint(x, 1);
-    if (!el || el === document.documentElement || el === document.body) continue;
-
-    const rect = el.getBoundingClientRect();
-    // Only count elements that are anchored at the very top (top ≤ 2px)
-    if (rect.top <= 2 && rect.bottom > maxBottom) {
-      maxBottom = rect.bottom;
-    }
-  }
-
-  return maxBottom;
-}
-
-export function useNavbarHeight(): number {
-  const [height, setHeight] = useState(0);
-  const rafRef = useRef<number | null>(null);
-
-  const scheduleUpdate = () => {
-    if (rafRef.current !== null) return;
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      setHeight(measureNavbarHeight());
-    });
-  };
-
-  useEffect(() => {
-    // Initial measure after first paint
-    scheduleUpdate();
-
-    // Navbars can change height on resize (mobile keyboard, orientation)
-    const vv = window.visualViewport;
-    if (vv) {
-      vv.addEventListener('resize', scheduleUpdate);
-    } else {
-      window.addEventListener('resize', scheduleUpdate, { passive: true });
-    }
-
-    // Watch for navbar being added/removed from DOM
-    const mo = new MutationObserver(scheduleUpdate);
-    mo.observe(document.body, { childList: true, subtree: false });
-
-    return () => {
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-      if (vv) {
-        vv.removeEventListener('resize', scheduleUpdate);
-      } else {
-        window.removeEventListener('resize', scheduleUpdate);
-      }
-      mo.disconnect();
-    };
-  }, []);
-
-  return height;
-}