auramaxx 0.0.1

package/src/components/design-system/Drawer.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  width?: 'sm' | 'md' | 'lg' | 'full';
+  footerLabel?: string;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  width = 'md',
+  footerLabel = '',
+}) => {
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      // Small delay to ensure DOM is ready before animation
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsAnimating(true);
+        });
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for exit animation to complete
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleEscape);
+    }
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  const widthStyles = {
+    sm: 'min(100vw, calc(320px * var(--ui-scale-factor, 1)))',
+    md: 'min(100vw, calc(400px * var(--ui-scale-factor, 1)))',
+    lg: 'min(100vw, calc(520px * var(--ui-scale-factor, 1)))',
+    full: '100vw',
+  };
+
+  if (!shouldRender || !isMounted) return null;
+
+  const drawerContent = (
+    <div
+      className="fixed inset-0 z-[110]"
+      onMouseDown={onClose}
+      data-testid="drawer-backdrop"
+    >
+      <div className="absolute inset-0 bg-black/10" />
+      <div
+        className="absolute right-0 top-0 h-full overflow-hidden"
+        style={{ width: widthStyles[width] }}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <div
+          className={`
+            h-full bg-[var(--color-surface,#ffffff)] flex flex-col clip-specimen border-mech shadow-mech
+            transition-transform duration-200 ease-out
+            ${isAnimating ? 'translate-x-0' : 'translate-x-full'}
+          `}
+        >
+          {/* Header — hazard accent + specimen label */}
+          <div className="relative border-b border-[var(--color-border,#d4d4d8)]">
+            <div className="absolute top-0 left-0 right-0 h-[2px] bg-hazard-stripes" />
+            <div className="px-[var(--space-4)] pt-[var(--space-3)] pb-[var(--space-2)]">
+              <div className="flex items-start justify-between">
+                <div>
+                  <span className="label-specimen-sm text-[var(--color-text-muted,#6b7280)]">{subtitle || 'PANEL'}</span>
+                  <h2 className="font-mono font-bold text-[length:var(--font-size-md)] text-[var(--color-text,#0a0a0a)] tracking-tight mt-[2px]">{title}</h2>
+                </div>
+                <button
+                  onClick={onClose}
+                  aria-label="Close drawer"
+                  className="p-[var(--space-1)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors group -mr-[var(--space-1)]"
+                >
+                  <X
+                    className="text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                    style={{ width: 'var(--font-size-md)', height: 'var(--font-size-md)' }}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-[var(--space-4)]">
+            {children}
+          </div>
+
+          {/* Footer — barcode strip */}
+          <div className="px-[var(--space-4)] py-[var(--space-2)] border-t border-[var(--color-border,#d4d4d8)]">
+            <div className="flex items-center justify-between">
+              <span className="label-specimen-sm text-[var(--color-text-faint,#9ca3af)]">{footerLabel || ''}</span>
+              <span className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-[0.3em]">|||||||||||</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(drawerContent, document.body);
+};

package/src/components/design-system/FilterDropdown.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface FilterDropdownProps {
+  options: ReadonlyArray<{ value: string; label: string }>;
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  compact?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  menuPosition?: 'auto' | 'top' | 'bottom';
+}
+
+export const FilterDropdown: React.FC<FilterDropdownProps> = ({
+  options,
+  value,
+  onChange,
+  label,
+  compact = false,
+  disabled = false,
+  ariaLabel,
+  searchable = false,
+  searchPlaceholder = 'Search...',
+  emptyMessage = 'No options found',
+  menuPosition = 'auto',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [menuMaxHeight, setMenuMaxHeight] = useState(192);
+  const [searchQuery, setSearchQuery] = useState('');
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const selectedOption = options.find(opt => opt.value === value);
+
+  const filteredOptions = useMemo(() => {
+    if (!searchable) return options;
+    const needle = searchQuery.trim().toLowerCase();
+    if (!needle) return options;
+    return options.filter((option) => (
+      option.label.toLowerCase().includes(needle)
+      || option.value.toLowerCase().includes(needle)
+    ));
+  }, [options, searchQuery, searchable]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery('');
+      return;
+    }
+    if (searchable) {
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [isOpen, searchable]);
+
+  const openMenu = () => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    const scale = Number.parseFloat(
+      window.getComputedStyle(document.documentElement).getPropertyValue('--ui-scale-factor'),
+    ) || 1;
+    if (rect) {
+      const viewportPadding = Math.round(12 * scale);
+      const desiredHeight = Math.round(192 * scale);
+      const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - viewportPadding);
+      const spaceAbove = Math.max(0, rect.top - viewportPadding);
+      const shouldOpenUpward = menuPosition === 'top'
+        ? true
+        : menuPosition === 'bottom'
+          ? false
+          : spaceBelow < desiredHeight && spaceAbove > spaceBelow;
+      const available = shouldOpenUpward ? spaceAbove : spaceBelow;
+      setOpenUpward(shouldOpenUpward);
+      setMenuMaxHeight(Math.max(0, Math.floor(Math.min(desiredHeight, available))));
+    } else {
+      setOpenUpward(menuPosition === 'top');
+      setMenuMaxHeight(Math.round(192 * scale));
+    }
+    setIsOpen(true);
+  };
+
+  return (
+    <div className={`relative w-full group ${isOpen ? 'z-50' : 'z-20'}`}>
+      {label && (
+        <label className="block text-[length:var(--font-size-xs)] font-mono font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-[var(--space-1)] px-[var(--space-1)] pointer-events-none">
+          {label}
+        </label>
+      )}
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={() => {
+          if (disabled) return;
+          if (isOpen) {
+            setIsOpen(false);
+            return;
+          }
+          openMenu();
+        }}
+        className={`
+            w-full ${compact ? 'h-[var(--control-height-sm)] text-[length:var(--font-size-xs)]' : 'h-[calc(var(--control-height-lg)+var(--space-2))] text-[length:var(--font-size-md)]'} flex items-center justify-between px-[var(--space-3)] outline-none
+            bg-[var(--color-background-alt,#f4f4f5)] border font-mono font-bold tracking-wider text-[var(--color-text,#0a0a0a)]
+            transition-all duration-200
+            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+            ${isOpen
+            ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] shadow-[0_0_0_1px_var(--color-border-muted,#a1a1aa)]'
+            : 'border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]'
+          }
+        `}
+      >
+        <span className="min-w-0 flex-1 truncate text-left">{selectedOption?.label || 'SELECT'}</span>
+        <ChevronDown
+          className={`shrink-0 transform transition-transform text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] ${isOpen ? 'rotate-180 text-[var(--color-text,#0a0a0a)]' : ''}`}
+          style={{ width: 'var(--font-size-md)', height: 'var(--font-size-md)' }}
+        />
+      </button>
+
+      {isOpen && !disabled && (
+        <>
+          <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+          <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+        </>
+      )}
+
+      {isOpen && !disabled && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          <div
+            className={`absolute left-0 w-full bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-[0_0_0_1px_var(--color-border-muted,#a1a1aa)] overflow-y-auto z-50 ${openUpward ? 'bottom-full mb-[var(--space-1)]' : 'top-full mt-[var(--space-1)]'}`}
+            style={{ maxHeight: `${menuMaxHeight}px` }}
+          >
+            {searchable && (
+              <div className="sticky top-0 bg-[var(--color-surface,#ffffff)] border-b border-[var(--color-border-muted,#e5e5e5)] p-[var(--space-2)]">
+                <input
+                  ref={searchInputRef}
+                  value={searchQuery}
+                  onChange={(event) => setSearchQuery(event.target.value)}
+                  placeholder={searchPlaceholder}
+                  className="w-full h-[var(--control-height-sm)] px-[var(--space-2)] border border-[var(--color-border,#d4d4d8)] font-mono text-[length:var(--font-size-xs)] text-[var(--color-text,#0a0a0a)] bg-[var(--color-background-alt,#f4f4f5)] focus:outline-none focus:border-[var(--color-border-focus,#0a0a0a)]"
+                  onKeyDown={(event) => {
+                    if (event.key === 'Escape') {
+                      event.preventDefault();
+                      setIsOpen(false);
+                    }
+                  }}
+                />
+              </div>
+            )}
+
+            {filteredOptions.length === 0 ? (
+              <div className="px-[var(--space-3)] py-[var(--space-3)] text-[var(--color-text-faint,#9ca3af)] font-mono text-[length:var(--font-size-xs)]">
+                {emptyMessage}
+              </div>
+            ) : (
+              filteredOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => {
+                    onChange(opt.value);
+                    setIsOpen(false);
+                  }}
+                  className={`w-full text-left px-[var(--space-3)] py-[var(--space-2)] text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] font-mono ${compact ? 'text-[length:var(--font-size-xs)]' : 'text-[length:var(--font-size-sm)]'} border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-[var(--space-2)] group/item`}
+                >
+                  <div className={`w-1.5 h-1.5 flex-shrink-0 ${opt.value === value ? 'bg-[var(--color-text,#0a0a0a)]' : 'bg-[var(--color-border,#d4d4d8)] group-hover/item:bg-[var(--color-text,#0a0a0a)]'}`} />
+                  <span className="min-w-0 flex-1 truncate">{opt.label}</span>
+                </button>
+              ))
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/design-system/ItemPicker.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import React from 'react';
+import { Check } from 'lucide-react';
+
+export interface ItemPickerOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  quickActionLabel?: string;
+  onQuickAction?: () => void;
+}
+
+interface ItemPickerProps {
+  options: ItemPickerOption[];
+  value: string | string[];
+  onChange: (value: any) => void;
+  multi?: boolean;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export const ItemPicker: React.FC<ItemPickerProps> = ({
+  options,
+  value,
+  onChange,
+  multi = false,
+  className = '',
+  disabled = false,
+  ariaLabel,
+}) => {
+  const isSelected = (optionValue: string) => {
+    if (multi && Array.isArray(value)) {
+      return value.includes(optionValue);
+    }
+    return value === optionValue;
+  };
+
+  const handleSelect = (optionValue: string) => {
+    if (disabled) return;
+
+    if (multi) {
+      const currentValues = Array.isArray(value) ? value : [];
+      if (currentValues.includes(optionValue)) {
+        onChange(currentValues.filter((v) => v !== optionValue));
+      } else {
+        onChange([...currentValues, optionValue]);
+      }
+    } else {
+      onChange(optionValue);
+    }
+  };
+
+  return (
+    <div
+      className={`relative clip-specimen-sm border-mech bg-[var(--color-surface,#ffffff)] shadow-mech ${disabled ? 'opacity-60' : ''} ${className}`}
+      role={multi ? 'group' : 'radiogroup'}
+      aria-label={ariaLabel}
+      data-testid="item-picker"
+    >
+      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none" />
+      <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none" />
+
+      <div className="absolute top-[6px] right-[10px] h-[calc(100%-12px)] w-[14px] opacity-35 pointer-events-none"
+        aria-hidden="true"
+        style={{
+          backgroundImage:
+            'repeating-linear-gradient(to bottom, var(--color-text-muted,#71717a) 0px, var(--color-text-muted,#71717a) 2px, transparent 2px, transparent 4px)',
+        }}
+      />
+
+      {options.map((option, index) => {
+        const selected = isSelected(option.value);
+        const descriptionId = option.description ? `item-picker-description-${option.value}` : undefined;
+
+        return (
+          <div
+            key={option.value}
+            role={multi ? 'checkbox' : 'radio'}
+            tabIndex={disabled ? -1 : 0}
+            aria-checked={selected}
+            aria-describedby={descriptionId}
+            data-testid={`item-picker-option-${option.value}`}
+            onClick={() => handleSelect(option.value)}
+            onKeyDown={(event) => {
+              if (disabled) return;
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                handleSelect(option.value);
+              }
+            }}
+            className={`
+              group relative flex w-full items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-2)] pr-[calc(var(--space-4)+12px)] text-left transition-colors
+              ${index !== options.length - 1 ? 'border-b border-[var(--color-border,#d4d4d8)]' : ''}
+              ${selected
+                ? 'bg-[var(--color-background-alt,#f4f4f5)] text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-inverse,#ffffff)]'
+                : 'bg-[var(--color-surface,#ffffff)] text-[var(--color-text-muted,#6b7280)] hover:bg-[var(--color-background-alt,#f4f4f5)] hover:text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)] dark:hover:text-[var(--color-text-inverse,#ffffff)]'
+              }
+              ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+            `}
+          >
+            <span
+              className={`
+                relative mt-[1px] flex h-3.5 w-3.5 shrink-0 items-center justify-center border transition-colors
+                ${multi ? 'rounded-[1px]' : 'rounded-full'}
+                ${selected
+                  ? 'border-[var(--color-text,#0a0a0a)] bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] dark:border-[var(--color-text-inverse,#ffffff)] dark:bg-[var(--color-text-inverse,#ffffff)] dark:text-[var(--color-surface-inverse,#000000)]'
+                  : 'border-[var(--color-border-muted,#a1a1aa)] bg-transparent'
+                }
+              `}
+            >
+              {selected ? <Check size={8} strokeWidth={3.5} /> : null}
+            </span>
+
+            <span className="min-w-0 flex-1">
+              <span className="block font-mono text-[10px] font-bold uppercase tracking-widest leading-none">
+                {option.label}
+              </span>
+              {option.description ? (
+                <span
+                  id={descriptionId}
+                  className="mt-1 block font-mono text-[10px] leading-tight text-[var(--color-text-muted,#71717a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)]"
+                >
+                  {option.description}
+                </span>
+              ) : null}
+            </span>
+
+            {option.onQuickAction ? (
+              <button
+                type="button"
+                data-testid={`item-picker-quick-action-${option.value}`}
+                aria-label={option.quickActionLabel || `Quick create ${option.label}`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  option.onQuickAction?.();
+                }}
+                disabled={disabled}
+                className="shrink-0 inline-flex h-5 w-5 items-center justify-center border border-[var(--color-border,#d4d4d8)] font-mono text-[10px] leading-none text-[var(--color-text-muted,#71717a)] opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 group-focus-within:opacity-100 hover:text-[var(--color-text,#0a0a0a)]"
+              >
+                +
+              </button>
+            ) : null}
+
+            {option.icon ? (
+              <span className={`shrink-0 ${selected ? 'text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-inverse,#ffffff)]' : 'text-[var(--color-text-muted,#71717a)] group-hover:text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)] dark:group-hover:text-[var(--color-text-inverse,#ffffff)]'}`}>
+                {option.icon}
+              </span>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};