@djangocfg/ui-tools 2.1.411 → 2.1.412

package/src/tools/CronScheduler/components/DayChips.tsx

@@ -8,7 +8,7 @@
  */
 
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronWeekDays } from '../context/hooks';
+import { useCronWeekDays, useCronSize } from '../context/hooks';
 import type { WeekDay } from '../types';
 
 const DAYS: { value: WeekDay; label: string; full: string }[] = [
@@ -33,6 +33,7 @@ export function DayChips({
   className,
 }: DayChipsProps) {
   const { weekDays, toggleWeekDay, setWeekDays } = useCronWeekDays();
+  const isSm = useCronSize() === 'sm';
 
   // Ensure weekDays is always an array
   const safeWeekDays = Array.isArray(weekDays) ? weekDays : [];
@@ -54,7 +55,10 @@ export function DayChips({
       isWeekendDay,
       className: cn(
         'flex flex-col items-center justify-center',
-        'py-2.5 rounded-lg text-xs font-medium',
+        'font-medium',
+        isSm
+          ? 'h-6 rounded-md text-[11px] leading-none'
+          : 'py-2.5 rounded-lg text-xs',
         'transition-all duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         'active:scale-[0.97]',
@@ -76,9 +80,13 @@ export function DayChips({
   ];
 
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       {/* Day Grid - full width */}
-      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of week">
+      <div
+        className={cn('grid grid-cols-7', isSm ? 'gap-1' : 'gap-1')}
+        role="group"
+        aria-label="Days of week"
+      >
         {dayButtons.map((day) => (
           <button
             key={day.value}
@@ -96,7 +104,7 @@ export function DayChips({
 
       {/* Quick Presets */}
       {showPresets && (
-        <div className="flex gap-2">
+        <div className={cn('flex', isSm ? 'gap-1' : 'gap-2')}>
           {presets.map((preset) => (
             <PresetButton
               key={preset.label}
@@ -104,6 +112,7 @@ export function DayChips({
               isActive={preset.isActive}
               onClick={() => setWeekDays(preset.days)}
               disabled={disabled}
+              compact={isSm}
             />
           ))}
         </div>
@@ -117,16 +126,20 @@ interface PresetButtonProps {
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  compact?: boolean;
 }
 
-function PresetButton({ label, isActive, onClick, disabled }: PresetButtonProps) {
+function PresetButton({ label, isActive, onClick, disabled, compact }: PresetButtonProps) {
   return (
     <button
       type="button"
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        'flex-1 px-3 py-1.5 rounded-md text-xs font-medium',
+        'flex-1 rounded-md font-medium',
+        compact
+          ? 'h-6 px-1.5 text-[11px] leading-none'
+          : 'px-3 py-1.5 text-xs',
         'transition-colors duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         isActive

package/src/tools/CronScheduler/components/MonthDayGrid.tsx

@@ -8,7 +8,7 @@
  */
 
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronMonthDays } from '../context/hooks';
+import { useCronMonthDays, useCronSize } from '../context/hooks';
 import type { MonthDay } from '../types';
 
 // Generate days 1-31
@@ -29,6 +29,7 @@ export function MonthDayGrid({
   className,
 }: MonthDayGridProps) {
   const { monthDays, toggleMonthDay, setMonthDays } = useCronMonthDays();
+  const isSm = useCronSize() === 'sm';
 
   // Ensure monthDays is always an array
   const safeMonthDays = Array.isArray(monthDays) ? monthDays : [];
@@ -61,8 +62,11 @@ export function MonthDayGrid({
       day: day as MonthDay,
       isSelected,
       className: cn(
-        'aspect-square flex items-center justify-center',
-        'rounded-lg text-sm font-medium',
+        'flex items-center justify-center',
+        'font-medium',
+        isSm
+          ? 'h-7 rounded-[5px] text-[10px] leading-none'
+          : 'aspect-square rounded-lg text-sm',
         'transition-all duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         'active:scale-[0.95]',
@@ -82,10 +86,10 @@ export function MonthDayGrid({
   const selectionCount = safeMonthDays.length;
 
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       {/* Quick Presets */}
       {showPresets && (
-        <div className="flex gap-2">
+        <div className={cn('flex', isSm ? 'gap-1' : 'gap-2')}>
           {presets.map((preset) => (
             <PresetButton
               key={preset.label}
@@ -93,16 +97,27 @@ export function MonthDayGrid({
               isActive={preset.isActive}
               onClick={() => setMonthDays(preset.days)}
               disabled={disabled}
+              compact={isSm}
             />
           ))}
         </div>
       )}
 
       {/* Calendar Grid - full width */}
-      <div className="grid grid-cols-7 gap-1" role="group" aria-label="Days of month">
+      <div
+        className={cn('grid grid-cols-7', isSm ? 'gap-0.5' : 'gap-1')}
+        role="group"
+        aria-label="Days of month"
+      >
         {gridCells.map((cell) => {
           if (cell.type === 'empty') {
-            return <div key={cell.key} aria-hidden="true" className="aspect-square" />;
+            return (
+              <div
+                key={cell.key}
+                aria-hidden="true"
+                className={isSm ? 'h-7' : 'aspect-square'}
+              />
+            );
           }
 
           return (
@@ -123,7 +138,13 @@ export function MonthDayGrid({
 
       {/* Selection hint */}
       {selectionCount > 1 && (
-        <p aria-live="polite" className="text-xs text-muted-foreground text-center">
+        <p
+          aria-live="polite"
+          className={cn(
+            'text-muted-foreground text-center',
+            isSm ? 'text-[10px]' : 'text-xs'
+          )}
+        >
           {selectionCount} days selected
         </p>
       )}
@@ -136,16 +157,20 @@ interface PresetButtonProps {
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  compact?: boolean;
 }
 
-function PresetButton({ label, isActive, onClick, disabled }: PresetButtonProps) {
+function PresetButton({ label, isActive, onClick, disabled, compact }: PresetButtonProps) {
   return (
     <button
       type="button"
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        'flex-1 px-3 py-1.5 rounded-md text-xs font-medium',
+        'flex-1 rounded-md font-medium',
+        compact
+          ? 'h-6 px-1.5 text-[11px] leading-none'
+          : 'px-3 py-1.5 text-xs',
         'transition-colors duration-150',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
         isActive

package/src/tools/CronScheduler/components/SchedulePreview.tsx

@@ -10,7 +10,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import { Calendar, Copy, Check, ArrowRight } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronPreview } from '../context/hooks';
+import { useCronPreview, useCronSize } from '../context/hooks';
 import { CronCheatsheet } from './CronCheatsheet';
 
 export interface SchedulePreviewProps {
@@ -31,6 +31,7 @@ export function SchedulePreview({
   className,
 }: SchedulePreviewProps) {
   const { cronExpression, humanDescription, isValid, initialValue } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   // Check if value has changed from initial
   const hasChanged = useMemo(
@@ -54,7 +55,8 @@ export function SchedulePreview({
       role="status"
       aria-live="polite"
       className={cn(
-        'px-3 py-2.5 rounded-lg border',
+        'rounded-lg border',
+        isSm ? 'px-2 py-1.5' : 'px-3 py-2.5',
         'bg-muted/30 border-border/50',
         !isValid && 'border-destructive/30 bg-destructive/5',
         className
@@ -62,17 +64,18 @@ export function SchedulePreview({
     >
       {/* Human description */}
       <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2 min-w-0">
+        <div className={cn('flex items-center min-w-0', isSm ? 'gap-1.5' : 'gap-2')}>
           <Calendar
             aria-hidden="true"
             className={cn(
-              'h-4 w-4 shrink-0',
+              'shrink-0',
+              isSm ? 'h-3.5 w-3.5' : 'h-4 w-4',
               isValid ? 'text-primary' : 'text-destructive'
             )}
           />
           <span
             className={cn(
-              'text-sm',
+              isSm ? 'text-xs' : 'text-sm',
               isValid ? 'text-foreground' : 'text-destructive'
             )}
           >

package/src/tools/CronScheduler/components/ScheduleTypeSelector.tsx

@@ -9,7 +9,7 @@
 
 import { Tabs, TabsList, TabsTrigger } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { useCronType } from '../context/hooks';
+import { useCronType, useCronSize } from '../context/hooks';
 import type { ScheduleType } from '../types';
 
 const SCHEDULE_TYPES: { value: ScheduleType; label: string }[] = [
@@ -29,9 +29,13 @@ export function ScheduleTypeSelector({
   className,
 }: ScheduleTypeSelectorProps) {
   const { type, setType } = useCronType();
+  const isSm = useCronSize() === 'sm';
 
   const triggerClassName = cn(
-    'text-xs font-medium px-2 py-1.5',
+    'font-medium',
+    isSm
+      ? 'text-[11px] leading-none px-1 py-0.5 h-6 rounded-[5px]'
+      : 'text-xs px-2 py-1.5',
     'data-[state=active]:shadow-sm',
     'transition-all duration-150'
   );
@@ -49,7 +53,12 @@ export function ScheduleTypeSelector({
       onValueChange={(v) => setType(v as ScheduleType)}
       className={cn('w-full', className)}
     >
-      <TabsList className="grid w-full grid-cols-4 h-9 p-0.5">
+      <TabsList
+        className={cn(
+          'grid w-full grid-cols-4',
+          isSm ? 'h-7 p-0.5 gap-0.5' : 'h-9 p-0.5'
+        )}
+      >
         {triggers.map((trigger) => (
           <TabsTrigger
             key={trigger.value}

package/src/tools/CronScheduler/components/TimeSelector.tsx

@@ -15,7 +15,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Clock } from 'lucide-react';
-import { useCronTime } from '../context/hooks';
+import { useCronTime, useCronSize } from '../context/hooks';
 
 const HOURS = Array.from({ length: 24 }, (_, i) => i);
 const MINUTES = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
@@ -32,6 +32,7 @@ export function TimeSelector({
   className,
 }: TimeSelectorProps) {
   const { hour, minute, setTime } = useCronTime();
+  const isSm = useCronSize() === 'sm';
 
   const is24h = format === '24h';
   const displayHour = is24h ? hour : (hour % 12) || 12;
@@ -60,28 +61,50 @@ export function TimeSelector({
 
   const hours = is24h ? HOURS : Array.from({ length: 12 }, (_, i) => i + 1);
 
+  // Compact-aware class fragments
+  const triggerClassName = cn(
+    isSm ? 'w-[58px] h-7 px-2 text-xs' : 'w-[70px] h-9'
+  );
+  const itemClassName = isSm ? 'text-xs' : undefined;
+
   return (
-    <div className={cn('flex items-center gap-3', className)}>
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Clock aria-hidden="true" className="h-4 w-4" />
-        <span className="text-sm">Run at</span>
+    <div
+      className={cn(
+        'flex items-center',
+        isSm ? 'gap-2' : 'gap-3',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center text-muted-foreground',
+          isSm ? 'gap-1.5' : 'gap-2'
+        )}
+      >
+        <Clock
+          aria-hidden="true"
+          className={isSm ? 'h-3.5 w-3.5' : 'h-4 w-4'}
+        />
+        <span className={isSm ? 'text-xs' : 'text-sm'}>Run at</span>
       </div>
 
-      <div className="flex items-center gap-1.5 flex-1">
+      <div
+        className={cn('flex items-center flex-1', isSm ? 'gap-1' : 'gap-1.5')}
+      >
         {/* Hour */}
         <Select
           value={displayHour.toString()}
           onValueChange={handleHourChange}
           disabled={disabled}
         >
-          <SelectTrigger className="w-[70px] h-9">
+          <SelectTrigger className={triggerClassName}>
             <SelectValue>
               {displayHour.toString().padStart(2, '0')}
             </SelectValue>
           </SelectTrigger>
           <SelectContent className="max-h-48">
             {hours.map((h) => (
-              <SelectItem key={h} value={h.toString()}>
+              <SelectItem key={h} value={h.toString()} className={itemClassName}>
                 {h.toString().padStart(2, '0')}
               </SelectItem>
             ))}
@@ -96,14 +119,14 @@ export function TimeSelector({
           onValueChange={handleMinuteChange}
           disabled={disabled}
         >
-          <SelectTrigger className="w-[70px] h-9">
+          <SelectTrigger className={triggerClassName}>
             <SelectValue>
               {minute.toString().padStart(2, '0')}
             </SelectValue>
           </SelectTrigger>
           <SelectContent className="max-h-48">
             {MINUTES.map((m) => (
-              <SelectItem key={m} value={m.toString()}>
+              <SelectItem key={m} value={m.toString()} className={itemClassName}>
                 {m.toString().padStart(2, '0')}
               </SelectItem>
             ))}
@@ -117,12 +140,12 @@ export function TimeSelector({
             onValueChange={handlePeriodChange}
             disabled={disabled}
           >
-            <SelectTrigger className="w-[70px] h-9">
+            <SelectTrigger className={triggerClassName}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="AM">AM</SelectItem>
-              <SelectItem value="PM">PM</SelectItem>
+              <SelectItem value="AM" className={itemClassName}>AM</SelectItem>
+              <SelectItem value="PM" className={itemClassName}>PM</SelectItem>
             </SelectContent>
           </Select>
         )}

package/src/tools/CronScheduler/context/CronSchedulerContext.tsx

@@ -57,6 +57,7 @@ export function CronSchedulerProvider({
   value,
   onChange,
   defaultType = 'daily',
+  size = 'default',
 }: CronSchedulerProviderProps) {
   // Track if this is initial mount to avoid calling onChange on mount
   const isInitialMount = useRef(true);
@@ -203,6 +204,8 @@ export function CronSchedulerProvider({
     () => ({
       // State
       ...state,
+      // Config
+      size,
       // Computed
       cronExpression,
       humanDescription,
@@ -219,6 +222,7 @@ export function CronSchedulerProvider({
     }),
     [
       state,
+      size,
       cronExpression,
       humanDescription,
       initialValue,

package/src/tools/CronScheduler/context/hooks.ts

@@ -78,6 +78,14 @@ export function useCronPreview() {
   );
 }
 
+/**
+ * Hook for the configured visual density (`default` | `sm`).
+ * Returns a stable value — never causes re-renders by itself.
+ */
+export function useCronSize() {
+  return useCronSchedulerContext().size;
+}
+
 /**
  * Full context access
  * Use sparingly - causes re-render on any state change

package/src/tools/CronScheduler/context/index.ts

@@ -14,5 +14,6 @@ export {
   useCronMonthDays,
   useCronCustom,
   useCronPreview,
+  useCronSize,
   useCronScheduler,
 } from './hooks';

package/src/tools/CronScheduler/index.tsx

@@ -50,6 +50,7 @@ function CronSchedulerFallback() {
 // Re-export types
 export type {
   CronSchedulerProps,
+  CronSchedulerSize,
   ScheduleType,
   WeekDay,
   MonthDay,
@@ -67,6 +68,7 @@ export {
   useCronMonthDays,
   useCronCustom,
   useCronPreview,
+  useCronSize,
   useCronScheduler,
 } from './context';
 

package/src/tools/CronScheduler/lazy.tsx

@@ -21,6 +21,7 @@ import type { CronSchedulerProps } from './types';
 // Re-export types
 export type {
   CronSchedulerProps,
+  CronSchedulerSize,
   ScheduleType,
   WeekDay,
   MonthDay,

package/src/tools/CronScheduler/types/index.ts

@@ -10,6 +10,13 @@
 
 export type ScheduleType = 'daily' | 'weekly' | 'monthly' | 'custom';
 
+/**
+ * Visual density of the scheduler fields.
+ * - `default` — full-size fields (unchanged).
+ * - `sm` — compact fields for narrow side panels / modals (~360-420px).
+ */
+export type CronSchedulerSize = 'default' | 'sm';
+
 /** Day of week: 0 = Sunday, 1 = Monday, ..., 6 = Saturday */
 export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -79,7 +86,10 @@ export interface CronSchedulerActions {
 export interface CronSchedulerContextValue
   extends CronSchedulerState,
     CronSchedulerComputed,
-    CronSchedulerActions {}
+    CronSchedulerActions {
+  /** Visual density of the fields (`default` | `sm`) */
+  size: CronSchedulerSize;
+}
 
 // ============================================================================
 // Component Props
@@ -107,6 +117,11 @@ export interface CronSchedulerProps {
   inline?: boolean;
   /** Trigger text shown when no schedule is set (compact mode only) */
   placeholder?: string;
+  /**
+   * Visual density of the fields. `sm` renders smaller, tighter fields
+   * suited for narrow side panels / modals. Default: `default`.
+   */
+  size?: CronSchedulerSize;
   /** Additional CSS classes */
   className?: string;
 }
@@ -116,4 +131,6 @@ export interface CronSchedulerProviderProps {
   value?: string;
   onChange?: (cron: string) => void;
   defaultType?: ScheduleType;
+  /** Visual density propagated to all field components. Default: `default`. */
+  size?: CronSchedulerSize;
 }

package/src/tools/Map/lazy.tsx

@@ -12,6 +12,7 @@
 
 import * as React from 'react';
 import { createLazyComponent, MapLoadingFallback } from '../../components';
+import type { MapContainerProps } from './components';
 
 // ============================================================================
 // Lazy Components
@@ -22,8 +23,11 @@ import { createLazyComponent, MapLoadingFallback } from '../../components';
  *
  * Automatically shows loading state while MapLibre GL loads (~800KB)
  */
-export const LazyMapContainer = createLazyComponent(
-  () => import('./components/MapContainer').then((mod) => ({ default: mod.MapContainer })),
+export const LazyMapContainer = createLazyComponent<MapContainerProps>(
+  () =>
+    import('./components/MapContainer').then((mod) => ({
+      default: mod.MapContainer,
+    })),
   {
     displayName: 'LazyMapContainer',
     fallback: <MapLoadingFallback minHeight={400} />,
@@ -33,8 +37,11 @@ export const LazyMapContainer = createLazyComponent(
 /**
  * LazyMapView - Lazy-loaded map view (alias for MapContainer)
  */
-export const LazyMapView = createLazyComponent(
-  () => import('./components/MapContainer').then((mod) => ({ default: mod.MapView })),
+export const LazyMapView = createLazyComponent<Omit<MapContainerProps, 'initialViewport'>>(
+  () =>
+    import('./components/MapContainer').then((mod) => ({
+      default: mod.MapView,
+    })),
   {
     displayName: 'LazyMapView',
     fallback: <MapLoadingFallback minHeight={400} />,

package/src/tools/Uploader/hooks/useClipboardPaste.ts

@@ -87,7 +87,9 @@ async function resolveClipboardFiles(
       }
       return [file];
     } catch (err) {
-      logger.warn('Failed to fetch pasted URL', err);
+      logger.warn('Failed to fetch pasted URL', {
+        error: err instanceof Error ? err.message : String(err),
+      });
       return [];
     }
   }

package/src/tools/index.ts

@@ -112,6 +112,7 @@ export {
   useCronMonthDays,
   useCronCustom,
   useCronPreview,
+  useCronSize,
   useCronScheduler,
   // Utilities
   buildCron,
@@ -128,6 +129,7 @@ export {
 } from './CronScheduler';
 export type {
   CronSchedulerProps,
+  CronSchedulerSize,
   ScheduleType,
   WeekDay,
   MonthDay,