@djangocfg/ui-tools 2.1.412 → 2.1.413

package/src/tools/input/Scroller/parts/Scroller.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react';
+import { ScrollerProvider, useScrollerContext } from '../context';
+import type {
+  ScrollerProps,
+  ScrollerItemProps,
+  ScrollerIndicatorProps,
+} from '../types';
+
+export function Scroller({
+  children,
+  orientation = 'horizontal',
+  snap = false,
+  snapAlign = 'start',
+  showIndicators = false,
+  hideScrollbar = true,
+  className,
+  ...props
+}: ScrollerProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const checkScroll = React.useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (orientation === 'horizontal') {
+      setCanScrollPrev(el.scrollLeft > 0);
+      setCanScrollNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    } else {
+      setCanScrollPrev(el.scrollTop > 0);
+      setCanScrollNext(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
+    }
+  }, [orientation]);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    checkScroll();
+    el.addEventListener('scroll', checkScroll, { passive: true });
+    window.addEventListener('resize', checkScroll);
+    return () => {
+      el.removeEventListener('scroll', checkScroll);
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [checkScroll]);
+
+  const scrollBy = React.useCallback(
+    (direction: 'prev' | 'next') => {
+      const el = containerRef.current;
+      if (!el) return;
+      const amount =
+        orientation === 'horizontal' ? el.clientWidth * 0.8 : el.clientHeight * 0.8;
+      const delta = direction === 'next' ? amount : -amount;
+      if (orientation === 'horizontal') {
+        el.scrollBy({ left: delta, behavior: 'smooth' });
+      } else {
+        el.scrollBy({ top: delta, behavior: 'smooth' });
+      }
+    },
+    [orientation]
+  );
+
+  const snapStyle = snap
+    ? {
+        scrollSnapType: `${orientation === 'horizontal' ? 'x' : 'y'} mandatory`,
+      } as React.CSSProperties
+    : undefined;
+
+  const value = React.useMemo(
+    () => ({ containerRef, orientation }),
+    [orientation]
+  );
+
+  return (
+    <ScrollerProvider value={value}>
+      <div
+        data-slot="scroller"
+        data-orientation={orientation}
+        className={cn('relative group', className)}
+        {...props}
+      >
+        <div
+          ref={containerRef}
+          data-slot="scroller-viewport"
+          className={cn(
+            'flex',
+            orientation === 'horizontal'
+              ? 'flex-row overflow-x-auto'
+              : 'flex-col overflow-y-auto',
+            hideScrollbar && 'scrollbar-hide',
+            snap && 'snap-x snap-mandatory'
+          )}
+          style={snapStyle}
+        >
+          {children}
+        </div>
+        {showIndicators && canScrollPrev && (
+          <ScrollerIndicator
+            direction={orientation === 'horizontal' ? 'prev' : 'prev'}
+            onClick={() => scrollBy('prev')}
+            disabled={!canScrollPrev}
+            className={cn(
+              'absolute z-10',
+              orientation === 'horizontal'
+                ? 'left-2 top-1/2 -translate-y-1/2'
+                : 'top-2 left-1/2 -translate-x-1/2'
+            )}
+          />
+        )}
+        {showIndicators && canScrollNext && (
+          <ScrollerIndicator
+            direction={orientation === 'horizontal' ? 'next' : 'next'}
+            onClick={() => scrollBy('next')}
+            disabled={!canScrollNext}
+            className={cn(
+              'absolute z-10',
+              orientation === 'horizontal'
+                ? 'right-2 top-1/2 -translate-y-1/2'
+                : 'bottom-2 left-1/2 -translate-x-1/2'
+            )}
+          />
+        )}
+      </div>
+    </ScrollerProvider>
+  );
+}
+Scroller.displayName = 'Scroller';
+
+export function ScrollerItem({
+  children,
+  snapAlign = 'start',
+  className,
+  ...props
+}: ScrollerItemProps) {
+  const { orientation } = useScrollerContext();
+  return (
+    <div
+      data-slot="scroller-item"
+      data-snap-align={snapAlign}
+      className={cn(
+        'shrink-0',
+        snapAlign !== 'none' && `snap-${snapAlign}`,
+        orientation === 'horizontal' ? 'w-fit' : 'h-fit',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+ScrollerItem.displayName = 'ScrollerItem';
+
+function ScrollerIndicator({
+  direction,
+  onClick,
+  disabled,
+  className,
+}: ScrollerIndicatorProps) {
+  const { orientation } = useScrollerContext();
+  const Icon =
+    orientation === 'horizontal'
+      ? direction === 'prev'
+        ? ChevronLeft
+        : ChevronRight
+      : direction === 'prev'
+        ? ChevronUp
+        : ChevronDown;
+
+  return (
+    <button
+      type="button"
+      data-slot="scroller-indicator"
+      data-direction={direction}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'flex h-8 w-8 items-center justify-center rounded-full',
+        'bg-background/90 text-foreground shadow-md backdrop-blur-sm',
+        'border border-border/50 transition-opacity hover:bg-background',
+        'disabled:opacity-0',
+        className
+      )}
+    >
+      <Icon className="h-4 w-4" />
+    </button>
+  );
+}
+ScrollerIndicator.displayName = 'ScrollerIndicator';

package/src/tools/input/Scroller/parts/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export {
+  Scroller,
+  ScrollerItem,
+} from './Scroller';

package/src/tools/input/Scroller/types.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import type * as React from 'react';
+
+export type SnapAlign = 'start' | 'center' | 'end' | 'none';
+
+export interface ScrollerContextValue {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  orientation: 'horizontal' | 'vertical';
+}
+
+export interface ScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /** Scroll direction */
+  orientation?: 'horizontal' | 'vertical';
+  /** Snap scroll to items */
+  snap?: boolean;
+  /** Snap alignment */
+  snapAlign?: SnapAlign;
+  /** Show scroll indicators (shadows/arrows) */
+  showIndicators?: boolean;
+  /** Hide scrollbar visually */
+  hideScrollbar?: boolean;
+}
+
+export interface ScrollerItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /** Snap alignment for this item (overrides parent) */
+  snapAlign?: SnapAlign;
+}
+
+export interface ScrollerIndicatorProps {
+  direction: 'prev' | 'next';
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+}

package/src/tools/input/Sortable/context/SortableContext.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import type { SortableContextValue } from '../types';
+
+const SortableContext = React.createContext<SortableContextValue | null>(null);
+
+export function SortableProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: SortableContextValue;
+}) {
+  return (
+    <SortableContext.Provider value={value}>
+      {children}
+    </SortableContext.Provider>
+  );
+}
+
+export function useSortableContext() {
+  const context = React.useContext(SortableContext);
+  if (!context) {
+    throw new Error(
+      'useSortableContext must be used within a SortableProvider'
+    );
+  }
+  return context;
+}

package/src/tools/input/Sortable/context/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export {
+  SortableProvider,
+  useSortableContext,
+} from './SortableContext';

package/src/tools/input/Sortable/index.ts

@@ -0,0 +1,40 @@
+'use client';
+
+/**
+ * Sortable
+ *
+ * Sortable list with drag handles. Supports vertical and horizontal layouts.
+ * Uses pointer events for broad device compatibility.
+ *
+ * @example
+ * import { Sortable, SortableItem, SortableHandle } from '@djangocfg/ui-tools/sortable';
+ *
+ * <Sortable items={items} onReorder={setItems}>
+ *   {items.map((item) => (
+ *     <SortableItem key={item.id} id={item.id}>
+ *       <SortableHandle />
+ *       <span>{item.label}</span>
+ *     </SortableItem>
+ *   ))}
+ * </Sortable>
+ */
+
+export {
+  Sortable,
+  SortableItem,
+  SortableHandle,
+} from './parts';
+
+export {
+  SortableProvider,
+  useSortableContext,
+} from './context';
+
+export type {
+  SortableProps,
+  SortableItemProps,
+  SortableHandleProps,
+  SortableContextValue,
+  SortableItemData,
+  SortableAxis,
+} from './types';

package/src/tools/input/Sortable/lazy.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+/**
+ * Lazy-loaded Sortable Component
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import type {
+  SortableProps,
+  SortableItemProps,
+  SortableHandleProps,
+} from './types';
+
+export type {
+  SortableProps,
+  SortableItemProps,
+  SortableHandleProps,
+} from './types';
+
+export const LazySortable = createLazyComponent<SortableProps>(
+  () => import('./parts/Sortable').then((m) => ({ default: m.Sortable })),
+  {
+    displayName: 'LazySortable',
+    fallback: <LoadingFallback minHeight={100} showText={false} />,
+  }
+);
+
+export const LazySortableItem = createLazyComponent<SortableItemProps>(
+  () => import('./parts/Sortable').then((m) => ({ default: m.SortableItem })),
+  {
+    displayName: 'LazySortableItem',
+    fallback: null,
+  }
+);
+
+export const LazySortableHandle = createLazyComponent<SortableHandleProps>(
+  () => import('./parts/Sortable').then((m) => ({ default: m.SortableHandle })),
+  {
+    displayName: 'LazySortableHandle',
+    fallback: null,
+  }
+);

package/src/tools/input/Sortable/parts/Sortable.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { GripVertical } from 'lucide-react';
+import { SortableProvider, useSortableContext } from '../context';
+import type {
+  SortableProps,
+  SortableItemProps,
+  SortableHandleProps,
+} from '../types';
+
+export function Sortable({
+  children,
+  items,
+  onReorder,
+  axis = 'vertical',
+  handleOnly = true,
+  className,
+}: SortableProps) {
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+  const [overId, setOverId] = React.useState<string | null>(null);
+  const dragStartPos = React.useRef<{ x: number; y: number } | null>(null);
+  const dragItemIndex = React.useRef<number>(-1);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const moveItem = React.useCallback(
+    (activeId: string, overId: string) => {
+      const activeIndex = items.findIndex((i) => i.id === activeId);
+      const overIndex = items.findIndex((i) => i.id === overId);
+      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return;
+      const newItems = [...items];
+      const [removed] = newItems.splice(activeIndex, 1);
+      newItems.splice(overIndex, 0, removed);
+      onReorder(newItems);
+    },
+    [items, onReorder]
+  );
+
+  const value = React.useMemo(
+    () => ({
+      items,
+      activeId,
+      axis,
+      handleOnly,
+      setActiveId,
+      moveItem,
+    }),
+    [items, activeId, axis, handleOnly, moveItem]
+  );
+
+  return (
+    <SortableProvider value={value}>
+      <div
+        ref={containerRef}
+        data-slot="sortable"
+        data-axis={axis}
+        className={cn(
+          'flex',
+          axis === 'vertical' ? 'flex-col' : 'flex-row',
+          className
+        )}
+      >
+        {children}
+      </div>
+    </SortableProvider>
+  );
+}
+Sortable.displayName = 'Sortable';
+
+export function SortableItem({ id, children, className, ...props }: SortableItemProps) {
+  const { activeId, axis, handleOnly, setActiveId, moveItem } = useSortableContext();
+  const isActive = activeId === id;
+  const itemRef = React.useRef<HTMLDivElement>(null);
+
+  const onPointerDown = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (handleOnly) return; // drag only via handle
+      const target = e.target as HTMLElement;
+      if (target.closest('[data-slot="sortable-handle"]')) return;
+      e.preventDefault();
+      setActiveId(id);
+    },
+    [handleOnly, id, setActiveId]
+  );
+
+  const onPointerEnter = React.useCallback(() => {
+    if (activeId && activeId !== id) {
+      moveItem(activeId, id);
+    }
+  }, [activeId, id, moveItem]);
+
+  return (
+    <div
+      ref={itemRef}
+      data-slot="sortable-item"
+      data-id={id}
+      data-active={isActive ? 'true' : undefined}
+      onPointerDown={onPointerDown}
+      onPointerEnter={onPointerEnter}
+      className={cn(
+        'relative select-none transition-transform',
+        isActive && 'z-50 opacity-80 scale-[1.02]',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+SortableItem.displayName = 'SortableItem';
+
+export function SortableHandle({ children, className, ...props }: SortableHandleProps) {
+  const { setActiveId } = useSortableContext();
+
+  const onPointerDown = React.useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      const item = (e.currentTarget as HTMLElement).closest('[data-id]');
+      if (item) {
+        const id = item.getAttribute('data-id');
+        if (id) setActiveId(id);
+      }
+    },
+    [setActiveId]
+  );
+
+  return (
+    <div
+      data-slot="sortable-handle"
+      onPointerDown={onPointerDown}
+      className={cn(
+        'cursor-grab active:cursor-grabbing inline-flex items-center justify-center',
+        'text-muted-foreground hover:text-foreground transition-colors',
+        className
+      )}
+      {...props}
+    >
+      {children ?? <GripVertical className="h-4 w-4" />}
+    </div>
+  );
+}
+SortableHandle.displayName = 'SortableHandle';

package/src/tools/input/Sortable/parts/index.ts

@@ -0,0 +1,7 @@
+'use client';
+
+export {
+  Sortable,
+  SortableItem,
+  SortableHandle,
+} from './Sortable';

package/src/tools/input/Sortable/types.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import type * as React from 'react';
+
+export type SortableAxis = 'vertical' | 'horizontal';
+
+export interface SortableItemData {
+  id: string;
+}
+
+export interface SortableContextValue {
+  items: SortableItemData[];
+  activeId: string | null;
+  axis: SortableAxis;
+  handleOnly: boolean;
+  setActiveId: (id: string | null) => void;
+  moveItem: (activeId: string, overId: string) => void;
+}
+
+export interface SortableProps {
+  children: React.ReactNode;
+  /** Items with unique ids */
+  items: SortableItemData[];
+  /** Called when order changes */
+  onReorder: (items: SortableItemData[]) => void;
+  /** Drag axis */
+  axis?: SortableAxis;
+  /** Only allow dragging via handle */
+  handleOnly?: boolean;
+  className?: string;
+}
+
+export interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  children: React.ReactNode;
+}
+
+export interface SortableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}

package/src/tools/{SpeechRecognition → input/SpeechRecognition}/core/audio/defaults.ts

@@ -13,8 +13,8 @@
  * Inlined as base64 data URLs in the Chat sound modules, so consumers
  * get working audio with zero loader / ambient-type setup.
  */
-import start from '../../../Chat/core/audio/sounds/start';
-import sent from '../../../Chat/core/audio/sounds/sent';
+import start from '../../../../chat/core/audio/sounds/start';
+import sent from '../../../../chat/core/audio/sounds/sent';
 
 export type VoiceSoundEvent = 'start' | 'stop';
 

package/src/tools/{SpeechRecognition → input/SpeechRecognition}/lazy.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent } from '../../components';
+import { createLazyComponent } from '../../../components';
 import type { DictationFieldProps } from './widgets/DictationField';
 
 export const LazyDictationField = createLazyComponent<DictationFieldProps>(

package/src/tools/{SpeechRecognition → input/SpeechRecognition}/widgets/VoiceComposerSlot.tsx

@@ -7,7 +7,7 @@ import { AlertCircle, Loader2, Mic } from 'lucide-react';
 import { useCountdownFromSeconds, useNotificationSounds } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useChatContextOptional } from '../../Chat/context';
+import { useChatContextOptional } from '../../../chat/context';
 import { useSpeechRecognition } from '../hooks/useSpeechRecognition';
 import { useVoiceSupport } from '../hooks/useVoiceSupport';
 import { getSpeechLogger } from '../core/logger';

package/src/tools/{ImageViewer → media/ImageViewer}/components/ImageInfo.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useImageCache } from '../../../stores/mediaCache';
+import { useImageCache } from '../../../../stores/mediaCache';
 import type { ImageInfoProps } from '../types';
 
 // =============================================================================

package/src/tools/{ImageViewer → media/ImageViewer}/hooks/useImageLoading.ts

@@ -6,7 +6,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { generateContentKey, useMediaCacheStore } from '../../../stores/mediaCache';
+import { generateContentKey, useMediaCacheStore } from '../../../../stores/mediaCache';
 import {
     createLQIP, imageDebug, MAX_IMAGE_SIZE, PROGRESSIVE_LOADING_THRESHOLD, WARNING_IMAGE_SIZE
 } from '../utils';

package/src/tools/{ImageViewer → media/ImageViewer}/lazy.tsx

@@ -10,7 +10,7 @@
  * import { ImageViewer } from '@djangocfg/ui-tools/image-viewer'
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components';
+import { createLazyComponent, LoadingFallback } from '../../../components';
 import type { ImageViewerProps } from './types';
 
 // ============================================================================

package/src/tools/{LottiePlayer → media/LottiePlayer}/lazy.tsx

@@ -10,7 +10,7 @@
  * import { LottiePlayer } from '@djangocfg/ui-tools/lottie'
  */
 
-import { createLazyComponent } from '../../components';
+import { createLazyComponent } from '../../../components';
 import type { LottiePlayerProps } from './types';
 
 // ============================================================================

package/src/tools/overlay/ResponsiveDialog/context/ResponsiveDialogContext.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import type { ResponsiveDialogContextValue } from '../types';
+
+const ResponsiveDialogContext = React.createContext<ResponsiveDialogContextValue | null>(null);
+
+export function ResponsiveDialogProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: ResponsiveDialogContextValue;
+}) {
+  return (
+    <ResponsiveDialogContext.Provider value={value}>
+      {children}
+    </ResponsiveDialogContext.Provider>
+  );
+}
+
+export function useResponsiveDialogContext() {
+  const context = React.useContext(ResponsiveDialogContext);
+  if (!context) {
+    throw new Error(
+      'useResponsiveDialogContext must be used within a ResponsiveDialogProvider'
+    );
+  }
+  return context;
+}

package/src/tools/overlay/ResponsiveDialog/context/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export {
+  ResponsiveDialogProvider,
+  useResponsiveDialogContext,
+} from './ResponsiveDialogContext';