@striae-org/striae 3.0.4

package/app/components/toast/toast.module.css

@@ -0,0 +1,137 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: color-mix(in lab, var(--black) 40%, transparent);
+  z-index: 999;
+  cursor: pointer;
+}
+
+.toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.8);
+  display: flex;
+  align-items: center;
+  gap: var(--spaceM);
+  padding: var(--spaceL) var(--spaceXL);
+  border-radius: var(--radiusL);
+  background: var(--backgroundLight);
+  border: 2px solid var(--border);
+  box-shadow: 0 8px 32px color-mix(in lab, var(--black) 25%, transparent);
+  z-index: 1000;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  max-width: 400px;
+  min-width: 300px;
+  backdrop-filter: blur(10px);
+}
+
+.toast.show {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.toast.success {
+  background: var(--backgroundLight);
+  border-color: var(--success);
+  box-shadow: 0 8px 32px color-mix(in lab, var(--success) 20%, transparent);
+}
+
+.toast.success .icon {
+  color: var(--success);
+  background: color-mix(in lab, var(--success) 15%, transparent);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.toast.error {
+  background: var(--backgroundLight);
+  border-color: var(--error);
+  box-shadow: 0 8px 32px color-mix(in lab, var(--error) 20%, transparent);
+}
+
+.toast.error .icon {
+  color: var(--error);
+  background: color-mix(in lab, var(--error) 15%, transparent);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.toast.warning {
+  background: var(--backgroundLight);
+  border-color: var(--error);
+  box-shadow: 0 8px 32px color-mix(in lab, var(--error) 20%, transparent);
+}
+
+.toast.warning .icon {
+  color: var(--error);
+  background: color-mix(in lab, var(--error) 15%, transparent);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.icon {
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.message {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.message a,
+.message a:visited {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.message a:hover {
+  color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: var(--textLight);
+  cursor: pointer;
+  padding: var(--spaceXS);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radiusS);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.closeButton:hover {
+  background: color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--text);
+}

package/app/components/toast/toast.tsx

@@ -0,0 +1,56 @@
+import { useEffect, type ReactNode } from 'react';
+import styles from './toast.module.css';
+
+interface ToastProps {
+  message: ReactNode;
+  type: 'success' | 'error' | 'warning';
+  isVisible: boolean;
+  onClose: () => void;
+  duration?: number;
+}
+
+export const Toast = ({ message, type, isVisible, onClose, duration = 4000 }: ToastProps) => {
+  useEffect(() => {
+    if (isVisible && duration > 0) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, onClose, duration]);
+
+  if (!isVisible) return null;
+
+  const handleBackdropKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <div 
+        className={styles.backdrop} 
+        onClick={onClose}
+        onKeyDown={handleBackdropKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-label="Close notification"
+      ></div>
+      <div className={`${styles.toast} ${styles[type]} ${isVisible ? styles.show : ''}`}>
+        <div className={styles.icon}>
+          {type === 'success' ? '✓' : type === 'warning' ? '!' : '✗'}
+        </div>
+        <span className={styles.message}>{message}</span>
+        <button 
+          className={styles.closeButton}
+          onClick={onClose}
+          aria-label="Close notification"
+        >
+          ×
+        </button>
+      </div>
+    </>
+  );
+};

package/app/components/toolbar/toolbar-color-selector.module.css

@@ -0,0 +1,171 @@
+.toolbarColorSelector {
+  position: absolute;
+  left: calc(100% + var(--spaceM));
+  bottom: 0;
+  background: var(--background);
+  border-radius: 5px;
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
+  padding: var(--spaceS);
+  width: 200px;
+  z-index: 50;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: var(--spaceS);
+  padding-bottom: var(--spaceXS);
+  border-bottom: 1px solid var(--border);
+}
+
+.title {
+  font-size: var(--fontSizeS);
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  margin-top: var(--spaceS);
+  padding-top: var(--spaceS);
+  border-top: 1px solid var(--border);
+}
+
+.actionButton {
+  width: 100%;
+  min-height: 38px;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: var(--fontSizeS);
+  font-weight: 600;
+  color: white;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.confirmButton {
+  background: var(--success);
+}
+
+.confirmButton:hover {
+  background: color-mix(in lab, var(--success) 80%, var(--black));
+}
+
+.cancelButton {
+  background: var(--error);
+}
+
+.cancelButton:hover {
+  background: color-mix(in lab, var(--error) 80%, var(--black));
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.toggleSection {
+  display: flex;
+  justify-content: center;
+}
+
+.toggleButton {
+  background: var(--backgroundSecondary);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: var(--spaceXS) var(--spaceS);
+  cursor: pointer;
+  font-size: var(--fontSizeXS);
+}
+
+.toggleButton:hover {
+  background: var(--backgroundTertiary);
+}
+
+.colorWheelSection {
+  display: flex;
+  justify-content: center;
+}
+
+.colorWheel {
+  width: 60px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.colorGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--spaceXS);
+  padding: var(--spaceXS);
+}
+
+.colorSwatch {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.colorSwatch:hover {
+  transform: scale(1.1);
+  border-color: var(--foreground);
+}
+
+.colorSwatch.selected {
+  border-color: var(--foreground);
+  border-width: 3px;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--foreground);
+  transform: scale(1.15);
+  position: relative;
+}
+
+.colorSwatch.selected::after {
+  content: "✓";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--foreground);
+  font-weight: bold;
+  font-size: 14px;
+  text-shadow: 0 0 3px var(--background), 0 0 6px var(--background);
+  pointer-events: none;
+}
+
+.preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+  padding: var(--spaceXS);
+  background: var(--backgroundSecondary);
+  border-radius: 3px;
+}
+
+.previewLabel {
+  font-size: var(--fontSizeXS);
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+.previewSwatch {
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  flex-shrink: 0;
+}

package/app/components/toolbar/toolbar-color-selector.tsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import styles from './toolbar-color-selector.module.css';
+
+interface ToolbarColorSelectorProps {
+  selectedColor: string;
+  onColorConfirm: (color: string) => void;
+  onCancel: () => void;
+  isVisible: boolean;
+}
+
+interface ColorOption {
+  value: string;
+  label: string;
+}
+
+const commonColors: ColorOption[] = [
+  { value: '#ff0000', label: 'Red' },
+  { value: '#ff8000', label: 'Orange' },
+  { value: '#ffde21', label: 'Yellow' },
+  { value: '#00ff00', label: 'Green' },
+  { value: '#00ffff', label: 'Cyan' },
+  { value: '#0000ff', label: 'Blue' },
+  { value: '#8000ff', label: 'Purple' },
+  { value: '#ff00ff', label: 'Magenta' },
+  { value: '#000000', label: 'Black' },
+  { value: '#ffffff', label: 'White' }
+];
+
+export const ToolbarColorSelector = ({ 
+  selectedColor, 
+  onColorConfirm, 
+  onCancel, 
+  isVisible 
+}: ToolbarColorSelectorProps) => {
+  const [tempSelectedColor, setTempSelectedColor] = useState(selectedColor);
+  const [showColorWheel, setShowColorWheel] = useState(false);
+
+  const handleConfirm = () => {
+    onColorConfirm(tempSelectedColor);
+  };
+
+  const handleCancel = () => {
+    setTempSelectedColor(selectedColor); // Reset to original color
+    setShowColorWheel(false); // Reset to presets view
+    onCancel();
+  };
+
+  // Handle keyboard events for escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isVisible) {
+        handleCancel();
+      }
+    };
+
+    if (isVisible) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isVisible, handleCancel]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={styles.toolbarColorSelector}>
+      <div className={styles.header}>
+        <span className={styles.title}>Select Box Color</span>
+      </div>
+      
+      <div className={styles.content}>
+        <div className={styles.toggleSection}>
+          <button 
+            onClick={() => setShowColorWheel(!showColorWheel)}
+            className={styles.toggleButton}
+          >
+            {showColorWheel ? 'Presets' : 'Custom'}
+          </button>
+        </div>
+        
+        {showColorWheel ? (
+          <div className={styles.colorWheelSection}>
+            <input            
+              type="color"
+              value={tempSelectedColor}
+              onChange={(e) => setTempSelectedColor(e.target.value)}
+              className={styles.colorWheel}
+              title="Choose a custom color"
+            />
+          </div>
+        ) : (
+          <div className={styles.colorGrid}>
+            {commonColors.map((color) => (
+              <button
+                key={color.value}
+                className={`${styles.colorSwatch} ${color.value === tempSelectedColor ? styles.selected : ''}`}
+                style={{ backgroundColor: color.value }}
+                onClick={() => setTempSelectedColor(color.value)}
+                aria-label={`Select ${color.label}`}
+                title={color.label}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.actions}>
+        <button
+          type="button"
+          onClick={handleConfirm}
+          className={`${styles.actionButton} ${styles.confirmButton}`}
+          title="Apply selected color"
+        >
+          ✓ Apply Color
+        </button>
+        <button
+          type="button"
+          onClick={handleCancel}
+          className={`${styles.actionButton} ${styles.cancelButton}`}
+          title="Cancel color selection"
+        >
+          ✕ Cancel
+        </button>
+      </div>
+    </div>
+  );
+};

package/app/components/toolbar/toolbar.module.css

@@ -0,0 +1,42 @@
+.toolbarContainer {
+  position: relative;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+  padding: var(--spaceS);
+  background: var(--background);
+  border-radius: 5px;
+  box-shadow: 0 var(--spaceXS) var(--spaceM) color-mix(in lab, var(--black) 10%, transparent);
+  height: auto;
+  overflow: hidden;
+  transition: opacity var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.toggleButton {
+  height: 40px;
+  flex-shrink: 0;
+  margin-bottom: var(--spaceM);
+}
+
+.toolbarContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+  height: auto;
+  transition: opacity var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.hidden {
+  height: calc(50px + (var(--spaceS) * 2));
+  opacity: 0.3;
+}
+
+.hidden .toolbarContent {
+  opacity: 0;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+}

package/app/components/toolbar/toolbar.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect } from 'react';
+import { Button } from '../button/button';
+import { ToolbarColorSelector } from './toolbar-color-selector';
+import styles from './toolbar.module.css';
+
+type ToolId = 'number' | 'class' | 'index' | 'id' | 'notes' | 'print' | 'visibility' | 'box';
+
+interface ToolbarProps {
+  onToolSelect?: (toolId: ToolId, active: boolean) => void;
+  onGeneratePDF?: () => void;
+  canGeneratePDF?: boolean;
+  onVisibilityChange?: (visible: boolean) => void;
+  isGeneratingPDF?: boolean;
+  onColorChange?: (color: string) => void;
+  selectedColor?: string;
+  isReadOnly?: boolean;
+  isConfirmed?: boolean;
+  isNotesOpen?: boolean;
+}
+
+export const Toolbar = ({ 
+  onToolSelect, 
+  onVisibilityChange, 
+  onGeneratePDF, 
+  canGeneratePDF, 
+  isGeneratingPDF = false,
+  onColorChange,
+  selectedColor = '#ff0000',
+  isReadOnly = false,
+  isConfirmed = false,
+  isNotesOpen = false
+}: ToolbarProps) => {
+  const [activeTools, setActiveTools] = useState<Set<ToolId>>(new Set());
+  const [isVisible, setIsVisible] = useState(true);
+  const [showColorSelector, setShowColorSelector] = useState(false);
+
+  // Automatically deactivate box annotations when notes are opened
+  useEffect(() => {
+    if (isNotesOpen && activeTools.has('box')) {
+      setActiveTools(prev => {
+        const next = new Set(prev);
+        next.delete('box');
+        onToolSelect?.('box', false);
+        return next;
+      });
+      setShowColorSelector(false);
+    }
+  }, [isNotesOpen, activeTools, onToolSelect]);
+
+  const handleToolClick = (toolId: ToolId) => {
+    if (toolId === 'print') {
+      if (onGeneratePDF && canGeneratePDF) {
+        onGeneratePDF();
+      }
+      onToolSelect?.('print', true);
+      return;
+    }
+
+    if (toolId === 'visibility') {
+      setIsVisible(!isVisible);
+      onVisibilityChange?.(!isVisible);
+      return;
+    }
+
+    // Prevent box annotations when notes sidebar is open
+    if (toolId === 'box' && isNotesOpen) {
+      return;
+    }
+
+    setActiveTools(prev => {
+      const next = new Set(prev);
+      if (next.has(toolId)) {
+        next.delete(toolId);
+        // Hide color selector when box tool is deactivated
+        if (toolId === 'box') {
+          setShowColorSelector(false);
+        }
+      } else {
+        next.add(toolId);
+        // Show color selector when box tool is activated (but not for confirmed images or read-only mode)
+        if (toolId === 'box' && !isConfirmed && !isReadOnly) {
+          setShowColorSelector(true);
+        }
+      }
+      onToolSelect?.(toolId, next.has(toolId));
+      return next;
+    });    
+  };
+
+  const handleColorConfirm = (color: string) => {
+    onColorChange?.(color);
+    setShowColorSelector(false);
+  };
+
+  const handleColorCancel = () => {
+    setShowColorSelector(false);
+  };
+
+  return (
+    <div className={styles.toolbarContainer}>
+      <div className={`${styles.toolbar} ${!isVisible ? styles.hidden : ''}`}>
+        <div className={styles.toggleButton}>
+          <Button
+            iconId={isVisible ? 'eye-off' : 'eye'}
+            isActive={false}
+            onClick={() => handleToolClick('visibility')}
+            ariaLabel={isVisible ? "Hide toolbar" : "Show toolbar"}            
+          />
+        </div>
+      <div className={styles.toolbarContent} role="toolbar" aria-label="Annotation tools">         
+      <Button
+        iconId="number"
+        isActive={activeTools.has('number')}
+        onClick={() => handleToolClick('number')}
+        ariaLabel="Case & Item Numbers"
+      />
+      <Button
+        iconId="class"
+        isActive={activeTools.has('class')}
+        onClick={() => handleToolClick('class')}
+        ariaLabel="Class Characteristics"
+      />
+      <Button
+        iconId="index"
+        isActive={activeTools.has('index')}
+        onClick={() => handleToolClick('index')}
+        ariaLabel="Index Marks"
+      />
+      <Button
+        iconId="id"
+        isActive={activeTools.has('id')}
+        onClick={() => handleToolClick('id')}
+        ariaLabel="Support Level"
+      />
+      <Button
+        iconId="box"
+        isActive={activeTools.has('box')}
+        onClick={() => handleToolClick('box')}
+        ariaLabel="Box Annotations"
+        disabled={isNotesOpen}
+      />
+      <Button
+        iconId="notes"
+        isActive={activeTools.has('notes')}
+        onClick={() => handleToolClick('notes')}
+        ariaLabel="Additional Notes"
+      />      
+      <Button
+        iconId="print"
+        isActive={false}
+        onClick={() => handleToolClick('print')}
+        ariaLabel={isGeneratingPDF ? "Generating PDF..." : "Save/Print to PDF"}
+        disabled={!canGeneratePDF || isGeneratingPDF || isReadOnly}
+        showSpinner={isGeneratingPDF}
+      />
+        </div>
+      </div>
+      
+      <ToolbarColorSelector
+        selectedColor={selectedColor}
+        onColorConfirm={handleColorConfirm}
+        onCancel={handleColorCancel}
+        isVisible={showColorSelector && isVisible && !isReadOnly && !isConfirmed}
+      />
+    </div>
+  );
+};