# Design Specification: Smart Intake - Identification State

**Screen ID:** FIL-003-B
**State:** 2 of 3 (Identify)
**Context:** Occurs immediately after a successful barcode/QR scan.
**Objective:** Validate the identity of the spool before committing it to the inventory.

---

## 1. User Experience Goals
- **Frictionless Validation:** If the scan is high-confidence, the user should only need to tap "Confirm".
- **Error Correction:** Provide easy paths to correct misidentified attributes without restarting the entire flow.
- **Glanceability:** Use color-coded confidence bars so the user knows immediately if the system is "sure" or "guessing".

---

## 2. Visual Hierarchy & Layout

### 2.1 Global Header
- **Top App Bar:** `md-top-app-bar` (Small).
  - **Leading:** Close icon (✕) -> Returns to Inventory with "Discard changes?" prompt.
  - **Title:** "Smart Intake"
- **Step Indicator:** Custom linear stepper.
  - `Scan` (Completed: Green check) $\rightarrow$ `Identify` (Active: Blue filled) $\rightarrow$ `Update` (Pending: Grey outline).

### 2.2 Main Content Area
The content is organized as a vertical stack of cards/inputs to ensure touch-first accessibility.

#### A. Confidence Card (`md-card` - filled)
- **Label:** "Scanned: [Barcode Value]" (Monospace)
- **Confidence Metric:** "Match: HIGH CONFIDENCE"
- **Visual Indicator:** A linear progress bar.
  - **High (≥80%):** Success Green (`#16A34A` / `#4ADE70`)
  - **Medium (40-79%):** Warning Yellow (`#CA8A04` / `#FACC15`)
  - **Low (<40%):** Error Red (`#DC2626` / `#F87171`)
- **Percentage:** Displayed as text (e.g., "92%") at the end of the bar.

#### B. Attribute Selection (Input Group)
- **Material Selector:** `md-dropdown-select` (Searchable).
  - *Pre-fill:* Based on scan result.
- **Brand Selector:** `md-dropdown-select` (Searchable).
  - *Pre-fill:* Based on scan result.
- **Color Picker:** Custom circular swatch grid.
  - **Interaction:** Tap to select. Selected swatch has a high-contrast ring indicator.
  - **Custom Option:** A "Custom" button that opens a text input for unique colors.
- **Finish & Modifier:** `md-chip-set` (Single select).
  - **Finish:** [Basic, Matte, Silk, Sparkle, Metallic, Translucent]
  - **Modifier:** [None, Carbon Fiber, Wood Fill, Glow-in-Dark, Marble, Gradient]

### 2.3 Action Bar (Footer)
- **Rescan Button:** `md-outlined-button`. Transitions user back to State 1 (Scan).
- **Confirm Button:** `md-filled-button`. Primary CTA. Transitions user to State 3 (Update).
  - *Constraint:* Disabled until Material, Brand, and Color are selected.

---

## 3. Technical Specifications

### 3.1 Dimensions & Touch Targets
- **Touch Targets:** Minimum 44x44px for all buttons, dropdowns, and swatches.
- **Padding:** 16px internal card padding; 24px external margin between major sections.
- **Typography:**
  - Title: `Display Small` (text-3xl font-bold)
  - Section Labels: `Label Medium` (text-sm font-medium)
  - Value Text: `Body Large` (text-base font-normal)

### 3.2 Theme Mapping
| Element | Kiosk (Dark) | Mobile (Light) |
|-----------|--------------|---------------|
| Background | `#0F172A` | `#F8FAFC` |
| Surface | `#1E293B` | `#FFFFFF` |
| Primary | `#60A5FA` | `#2563EB` |
| Text Primary | `#F1F5F9` | `#0F172A` |
| Text Secondary| `#94A3B8` | `#475569` |

---

## 4. State Transitions

### Transition: Scan $\rightarrow$ Identify
- **Trigger:** Barcode detected and decoded.
- **Animation:** 
  1. Scanning frame flashes **Green**.
  2. A "Slide-in" transition from the right (300ms ease-out).
  3. Step indicator dot for "Scan" transforms into a checkmark.
  4. Step indicator dot for "Identify" fills with Primary color.

### Transition: Identify $\rightarrow$ Update
- **Trigger:** "Confirm" button tapped.
- **Animation:**
  1. Slide-in transition from the right (300ms ease-out).
  2. Step indicator dot for "Identify" transforms into a checkmark.
  3. Step indicator dot for "Update" fills with Primary color.

---

## 5. Edge Cases & Error Handling
- **No Match Found:** Confidence bar is Red (0%). All dropdowns are empty. System displays a hint: "Barcode unknown. Please enter details manually."
- **Ambiguous Match:** Confidence bar is Yellow. Material and Brand are pre-filled, but Color is highlighted with a "Review Required" pulse.
- **Invalid Input:** If a user attempts to confirm without required fields, the missing fields pulse Red.