@anymux/ui-kit 0.1.0

package/src/list/components/ViewSizeControls.tsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListItemsModel } from '../models/ListItemsModel';
+
+// AICODE-NOTE: View size controls component for adjusting item sizes
+export interface ViewSizeControlsProps {
+  model: ListItemsModel;
+  className?: string;
+  showSizePresets?: boolean;
+  showCustomSliders?: boolean;
+  showDebugToggle?: boolean;
+}
+
+// AICODE-NOTE: Extract size preset button into separate observer component for MobX reactivity
+interface SizePresetButtonProps {
+  preset: { value: 'small' | 'medium' | 'large' | 'extra-large'; label: string };
+  isActive: boolean;
+  onSizeChange: (size: 'small' | 'medium' | 'large' | 'extra-large') => void;
+}
+
+const SizePresetButton = observer<SizePresetButtonProps>(({ preset, isActive, onSizeChange }) => (
+  <button
+    onClick={() => onSizeChange(preset.value)}
+    className={`
+      px-3 py-1 text-xs rounded-md border transition-colors
+      ${isActive 
+        ? 'bg-primary text-primary-foreground border-primary' 
+        : 'bg-background hover:bg-muted border-border'
+      }
+    `}
+  >
+    {preset.label}
+  </button>
+));
+
+SizePresetButton.displayName = 'SizePresetButton';
+
+const ViewSizeControlsComponent: React.FC<ViewSizeControlsProps> = ({
+  model,
+  className = '',
+  showSizePresets = true,
+  showCustomSliders = false,
+  showDebugToggle = false
+}) => {
+  // AICODE-NOTE: Check if current view supports size controls
+  const supportsSize = ['grid', 'masonry-horizontal', 'masonry-vertical'].includes(model.currentViewType.id);
+  
+  if (!supportsSize && !showDebugToggle) {
+    return null;
+  }
+
+  // AICODE-NOTE: Size preset options
+  const sizePresets: Array<{ value: 'small' | 'medium' | 'large' | 'extra-large'; label: string }> = [
+    { value: 'small', label: 'Small' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'large', label: 'Large' },
+    { value: 'extra-large', label: 'Extra Large' }
+  ];
+
+  // AICODE-NOTE: Handle size preset change
+  const handleSizePresetChange = (size: 'small' | 'medium' | 'large' | 'extra-large') => {
+    model.setItemSize(size);
+  };
+
+  // AICODE-NOTE: Handle custom width change
+  const handleWidthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const width = parseInt(event.target.value, 10);
+    model.setCustomItemWidth(width);
+  };
+
+  // AICODE-NOTE: Handle custom height change
+  const handleHeightChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const height = parseInt(event.target.value, 10);
+    model.setCustomItemHeight(height);
+  };
+
+  // AICODE-NOTE: Handle items per row change
+  const handleItemsPerRowChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value, 10);
+    model.setItemsPerRow(value);
+  };
+
+  // AICODE-NOTE: Handle auto items per row
+  const handleAutoItemsPerRow = () => {
+    model.setItemsPerRow('auto');
+  };
+
+  return (
+    <div className={`view-size-controls space-y-3 ${className}`}>
+      {/* AICODE-NOTE: Debug toggle for all views */}
+      {showDebugToggle && (
+        <div className="debug-toggle flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="debug-visualization"
+            checked={model.debugVisualization || false}
+            onChange={(e) => model.setDebugVisualization?.(e.target.checked)}
+            className="w-4 h-4 text-primary bg-background border-border rounded focus:ring-primary focus:ring-2"
+          />
+          <label htmlFor="debug-visualization" className="text-sm font-medium text-foreground">
+            Debug Visualization
+          </label>
+          <span className="text-xs text-muted-foreground">
+            Show colored borders for layout debugging
+          </span>
+        </div>
+      )}
+
+      {/* AICODE-NOTE: Size preset buttons */}
+      {supportsSize && showSizePresets && (
+        <div className="size-presets flex items-center gap-2">
+          <span className="text-sm font-medium text-muted-foreground">Size:</span>
+          <div className="flex gap-1">
+            {sizePresets.map((preset) => (
+              <SizePresetButton
+                key={preset.value}
+                preset={preset}
+                isActive={model.itemSize === preset.value}
+                onSizeChange={handleSizePresetChange}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* AICODE-NOTE: Items per row slider */}
+      {supportsSize && (
+        <div className="items-per-row flex items-center gap-2">
+          <span className="text-sm font-medium text-muted-foreground">Items per row:</span>
+          <button
+            onClick={handleAutoItemsPerRow}
+            className={`
+              px-2 py-1 text-xs rounded border transition-colors
+              ${model.itemsPerRow === 'auto' 
+                ? 'bg-primary text-primary-foreground border-primary' 
+                : 'bg-background hover:bg-muted border-border'
+              }
+            `}
+          >
+            Auto
+          </button>
+          <input
+            type="range"
+            min="1"
+            max="8"
+            step="1"
+            value={typeof model.itemsPerRow === 'number' ? model.itemsPerRow : 4}
+            onChange={handleItemsPerRowChange}
+            className="w-24 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+          />
+          <span className="text-xs text-muted-foreground w-4">
+            {typeof model.itemsPerRow === 'number' ? model.itemsPerRow : 'Auto'}
+          </span>
+        </div>
+      )}
+
+      {/* AICODE-NOTE: Custom size sliders */}
+      {supportsSize && showCustomSliders && (
+        <div className="custom-sliders flex items-center gap-4">
+          <div className="width-slider flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">W:</span>
+            <input
+              type="range"
+              min="120"
+              max="600"
+              step="10"
+              value={model.customItemWidth}
+              onChange={handleWidthChange}
+              className="w-20 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+            />
+            <span className="text-xs text-muted-foreground w-8">
+              {model.customItemWidth}
+            </span>
+          </div>
+          
+          <div className="height-slider flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">H:</span>
+            <input
+              type="range"
+              min="80"
+              max="500"
+              step="10"
+              value={model.customItemHeight}
+              onChange={handleHeightChange}
+              className="w-20 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+            />
+            <span className="text-xs text-muted-foreground w-8">
+              {model.customItemHeight}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* AICODE-NOTE: Current dimensions display */}
+      {supportsSize && (
+        <div className="dimensions-display text-xs text-muted-foreground">
+          {model.itemDimensions.width} × {model.itemDimensions.height}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// AICODE-NOTE: Export memoized component for performance
+export const ViewSizeControls = observer(ViewSizeControlsComponent);

package/src/list/components/ViewTypeSelector.tsx

@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListViewType } from '../types/ListTypes';
+import { List, Grid, Table, LayoutList, Columns, MoreHorizontal, ChevronDown, SquareStack } from 'lucide-react';
+
+export interface ViewTypeSelectorProps {
+  viewTypes: ListViewType[];
+  currentViewType: ListViewType;
+  onViewTypeChange: (viewType: ListViewType) => void;
+  variant?: 'buttons' | 'tabs' | 'dropdown';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const PRIMARY_VIEW_IDS = new Set(['list', 'grid', 'details']);
+
+const getViewTypeIcon = (viewTypeId: string) => {
+  switch (viewTypeId) {
+    case 'list':
+      return List;
+    case 'grid':
+      return Grid;
+    case 'details':
+      return Table;
+    case 'masonry-horizontal':
+      return LayoutList;
+    case 'masonry-vertical':
+      return Columns;
+    case 'treemap':
+      return SquareStack;
+    default:
+      return List;
+  }
+};
+
+interface ViewTypeButtonProps {
+  viewType: ListViewType;
+  isActive: boolean;
+  onViewTypeChange: (viewType: ListViewType) => void;
+  sizeClasses: string;
+  variant: 'buttons' | 'tabs' | 'dropdown';
+}
+
+const ViewTypeButton = observer<ViewTypeButtonProps>(({
+  viewType,
+  isActive,
+  onViewTypeChange,
+  sizeClasses,
+  variant
+}) => {
+  const Icon = getViewTypeIcon(viewType.id);
+
+  if (variant === 'buttons') {
+    return (
+      <button
+        onClick={() => onViewTypeChange(viewType)}
+        className={`
+          ${sizeClasses}
+          flex items-center gap-2 font-medium transition-all
+          first:rounded-l-lg last:rounded-r-lg
+          ${isActive
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+          }
+        `}
+        title={viewType.name}
+      >
+        <Icon className="w-4 h-4" />
+        <span className="hidden sm:inline">{viewType.name}</span>
+      </button>
+    );
+  }
+
+  if (variant === 'tabs') {
+    return (
+      <button
+        onClick={() => onViewTypeChange(viewType)}
+        className={`
+          ${sizeClasses}
+          flex items-center gap-2 font-medium transition-all
+          border-b-2 -mb-px
+          ${isActive
+            ? 'border-primary text-primary'
+            : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
+          }
+        `}
+      >
+        <Icon className="w-4 h-4" />
+        {viewType.name}
+      </button>
+    );
+  }
+
+  return null;
+});
+
+ViewTypeButton.displayName = 'ViewTypeButton';
+
+/** "More views" dropdown for advanced view types (masonry, treemap, etc.) */
+const MoreViewsDropdown = observer<{
+  viewTypes: ListViewType[];
+  currentViewType: ListViewType;
+  onViewTypeChange: (viewType: ListViewType) => void;
+  sizeClasses: string;
+}>(({ viewTypes, currentViewType, onViewTypeChange, sizeClasses }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const isAdvancedActive = viewTypes.some(vt => vt.id === currentViewType.id);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  if (viewTypes.length === 0) return null;
+
+  // If an advanced view is active, show its icon instead of the generic "more" icon
+  const ActiveIcon = isAdvancedActive ? getViewTypeIcon(currentViewType.id) : MoreHorizontal;
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(prev => !prev)}
+        className={`
+          ${sizeClasses}
+          flex items-center gap-1 font-medium transition-all rounded-lg
+          ${isAdvancedActive
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+          }
+        `}
+        title={isAdvancedActive ? currentViewType.name : 'More views'}
+      >
+        <ActiveIcon className="w-4 h-4" />
+        {isAdvancedActive && <span className="hidden sm:inline">{currentViewType.name}</span>}
+        <ChevronDown className="w-3 h-3" />
+      </button>
+
+      {open && (
+        <div className="absolute top-full right-0 mt-1 z-50 min-w-[180px] border rounded-lg bg-background shadow-md py-1">
+          {viewTypes.map((viewType) => {
+            const Icon = getViewTypeIcon(viewType.id);
+            const isActive = currentViewType.id === viewType.id;
+            return (
+              <button
+                key={viewType.id}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors
+                  ${isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-foreground hover:bg-muted'
+                  }
+                `}
+                onClick={() => {
+                  onViewTypeChange(viewType);
+                  setOpen(false);
+                }}
+              >
+                <Icon className="w-4 h-4" />
+                <span>{viewType.name}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+
+MoreViewsDropdown.displayName = 'MoreViewsDropdown';
+
+const ViewTypeSelectorComponent = observer<ViewTypeSelectorProps>(({
+  viewTypes,
+  currentViewType,
+  onViewTypeChange,
+  variant = 'buttons',
+  size = 'md',
+  className = ''
+}) => {
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-2 text-sm',
+    lg: 'px-4 py-3 text-base'
+  };
+
+  if (variant === 'buttons') {
+    const primaryViews = viewTypes.filter(vt => PRIMARY_VIEW_IDS.has(vt.id));
+    const advancedViews = viewTypes.filter(vt => !PRIMARY_VIEW_IDS.has(vt.id));
+
+    return (
+      <div className={`flex items-center gap-1 ${className}`}>
+        <div className="flex rounded-lg border bg-background">
+          {primaryViews.map((viewType) => (
+            <ViewTypeButton
+              key={viewType.id}
+              viewType={viewType}
+              isActive={currentViewType.id === viewType.id}
+              onViewTypeChange={onViewTypeChange}
+              sizeClasses={sizeClasses[size]}
+              variant={variant}
+            />
+          ))}
+        </div>
+        <MoreViewsDropdown
+          viewTypes={advancedViews}
+          currentViewType={currentViewType}
+          onViewTypeChange={onViewTypeChange}
+          sizeClasses={sizeClasses[size]}
+        />
+      </div>
+    );
+  }
+
+  if (variant === 'tabs') {
+    return (
+      <div className={`flex border-b ${className}`}>
+        {viewTypes.map((viewType) => (
+          <ViewTypeButton
+            key={viewType.id}
+            viewType={viewType}
+            isActive={currentViewType.id === viewType.id}
+            onViewTypeChange={onViewTypeChange}
+            sizeClasses={sizeClasses[size]}
+            variant={variant}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (variant === 'dropdown') {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const CurrentIcon = getViewTypeIcon(currentViewType.id);
+
+    useEffect(() => {
+      if (!dropdownOpen) return;
+      const handleClickOutside = (e: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+          setDropdownOpen(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [dropdownOpen]);
+
+    return (
+      <div ref={dropdownRef} className={`relative ${className}`}>
+        <button
+          className={`
+            ${sizeClasses[size]}
+            flex items-center gap-2 font-medium border rounded-lg bg-background hover:bg-muted transition-colors
+          `}
+          onClick={() => setDropdownOpen((prev) => !prev)}
+        >
+          <CurrentIcon className="w-4 h-4" />
+          <span>{currentViewType.name}</span>
+          <ChevronDown className="w-4 h-4" />
+        </button>
+
+        {dropdownOpen && (
+          <div className="absolute top-full left-0 mt-1 z-50 min-w-[160px] border rounded-lg bg-background shadow-md py-1">
+            {viewTypes.map((viewType) => {
+              const Icon = getViewTypeIcon(viewType.id);
+              const isActive = currentViewType.id === viewType.id;
+              return (
+                <button
+                  key={viewType.id}
+                  className={`
+                    w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors
+                    ${isActive
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-foreground hover:bg-muted'
+                    }
+                  `}
+                  onClick={() => {
+                    onViewTypeChange(viewType);
+                    setDropdownOpen(false);
+                  }}
+                >
+                  <Icon className="w-4 h-4" />
+                  <span>{viewType.name}</span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return null;
+});
+
+ViewTypeSelectorComponent.displayName = 'ViewTypeSelector';
+
+export const ViewTypeSelector = React.memo(ViewTypeSelectorComponent, (prevProps, nextProps) => {
+  return (
+    prevProps.currentViewType.id === nextProps.currentViewType.id &&
+    prevProps.viewTypes.length === nextProps.viewTypes.length &&
+    prevProps.variant === nextProps.variant &&
+    prevProps.className === nextProps.className &&
+    prevProps.size === nextProps.size &&
+    prevProps.viewTypes.every((vt, index) => vt.id === nextProps.viewTypes[index]?.id)
+  );
+});