# Screenshot Import Complete Examples

This document contains complete end-to-end examples of screenshot-to-uxscii conversion, showing input data, generated files, and expected outputs.

## Example 1: Simple Button Component

### Input: Vision Analysis Data

```json
{
  "id": "submit-button",
  "type": "button",
  "category": "atomic",
  "visualProperties": {
    "width": 20,
    "height": 3,
    "borderStyle": "rounded",
    "textContent": "Submit"
  },
  "states": ["default", "hover", "focus", "disabled"],
  "accessibility": {
    "role": "button",
    "label": "Submit form"
  }
}
```

### Output: submit-button.uxm

```json
{
  "id": "submit-button",
  "type": "button",
  "version": "1.0.0",
  "metadata": {
    "name": "Submit Button",
    "description": "An interactive button component for user actions. Submit form",
    "author": "Fluxwing Screenshot Import",
    "created": "2025-10-13T12:00:00Z",
    "modified": "2025-10-13T12:00:00Z",
    "tags": ["button", "imported", "screenshot-generated", "utility", "interactive"],
    "category": "utility"
  },
  "props": {
    "text": "Submit",
    "variant": "secondary",
    "size": "small"
  },
  "behavior": {
    "states": [
      {
        "name": "default",
        "properties": {
          "border": "rounded",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "hover",
        "properties": {
          "border": "heavy",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "focus",
        "properties": {
          "border": "heavy",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "disabled",
        "properties": {
          "border": "dashed",
          "background": "filled",
          "textColor": "default",
          "opacity": 0.5,
          "cursor": "not-allowed"
        }
      }
    ],
    "interactions": ["click", "keyboard"],
    "accessibility": {
      "role": "button",
      "focusable": true,
      "keyboardSupport": ["Enter", "Space"],
      "ariaLabel": "Submit form"
    }
  },
  "layout": {
    "display": "inline-block",
    "positioning": "static",
    "spacing": {
      "padding": { "x": 2, "y": 1 },
      "margin": { "x": 0, "y": 0 }
    },
    "sizing": {
      "minWidth": 20,
      "height": 3
    }
  },
  "ascii": {
    "templateFile": "submit-button.md",
    "width": 20,
    "height": 3,
    "variables": [
      {
        "name": "text",
        "type": "string",
        "required": true,
        "default": "Submit",
        "description": "button label text"
      },
      {
        "name": "variant",
        "type": "string",
        "required": false,
        "default": "primary",
        "description": "Button style variant (primary, secondary, danger)"
      },
      {
        "name": "size",
        "type": "string",
        "required": false,
        "default": "medium",
        "description": "Component size (small, medium, large)"
      }
    ]
  }
}
```

### Output: submit-button.md

```markdown
# Submit Button

An interactive button component for user actions. Submit form

## Default State

```
╭──────────────────╮
│▓▓▓▓▓▓Submit▓▓▓▓▓▓│
╰──────────────────╯
```

## Hover State

```
┏━━━━━━━━━━━━━━━━━━┓
┃████████Submit████┃
┗━━━━━━━━━━━━━━━━━━┛
```

## Focus State

```
┏━━━━━━━━━━━━━━━━━━┓
┃▓▓▓▓▓Submit ✨▓▓▓▓┃
┗━━━━━━━━━━━━━━━━━━┛
```

## Disabled State

```
╭ ─ ─ ─ ─ ─ ─ ─ ─ ╮
│      Submit      │
╰ ─ ─ ─ ─ ─ ─ ─ ─ ╯
```

## Variables

- `text` (string, required): button label text
  - Default: "Submit"
  - Example: "Submit Form"

- `variant` (string, optional): Button style variant (primary, secondary, danger)
  - Default: "primary"

- `size` (string, optional): Component size (small, medium, large)
  - Default: "medium"

## Accessibility

- **Role**: button
- **Focusable**: Yes
- **Keyboard Support**: Enter, Space
- **ARIA Label**: Submit form

## Usage Examples

```
╭──────────────────╮
│▓▓▓Submit Form▓▓▓▓│
╰──────────────────╯
```

---
*Generated by Fluxwing Screenshot Import*
```

---

## Example 2: Email Input Component

### Input: Vision Analysis Data

```json
{
  "id": "email-input",
  "type": "input",
  "category": "atomic",
  "visualProperties": {
    "width": 40,
    "height": 3,
    "borderStyle": "light",
    "textContent": "Email",
    "placeholder": "Enter your email"
  },
  "states": ["default", "focus", "error", "disabled"],
  "accessibility": {
    "role": "textbox",
    "label": "Email address"
  }
}
```

### Output: email-input.uxm (abbreviated)

```json
{
  "id": "email-input",
  "type": "input",
  "version": "1.0.0",
  "metadata": {
    "name": "Email Input",
    "description": "A text input field for user data entry. Email address",
    "category": "input"
  },
  "props": {
    "text": "Email",
    "placeholder": "Enter your email",
    "type": "email",
    "size": "large",
    "maxLength": 32
  },
  "ascii": {
    "templateFile": "email-input.md",
    "width": 40,
    "height": 3,
    "variables": [
      {
        "name": "text",
        "type": "string",
        "required": true,
        "default": "Email",
        "description": "input label text"
      },
      {
        "name": "placeholder",
        "type": "string",
        "required": false,
        "default": "Enter your email",
        "description": "Placeholder text when empty"
      },
      {
        "name": "value",
        "type": "string",
        "required": false,
        "default": "",
        "description": "Current value"
      }
    ]
  }
}
```

### Output: email-input.md

```markdown
# Email Input

A text input field for user data entry. Email address

## Default State

```
┌──────────────────────────────────────┐
│ Email                                │
│ Enter your email                     │
└──────────────────────────────────────┘
```

## Focus State

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Email                              │┃
┃ john.doe@example.com               ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
```

## Error State

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ⚠️ Email                            ┃
┃ invalid@email                       ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
❌ Please enter valid email address
```

## Disabled State

```
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ Email                                │
│ ──────────────────────              │
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
```

## Variables

- `text` (string, required): input label text
  - Default: "Email"

- `placeholder` (string, optional): Placeholder text when empty
  - Default: "Enter your email"

- `value` (string, optional): Current value
  - Default: ""

## Accessibility

- **Role**: textbox
- **Focusable**: Yes
- **Keyboard Support**: Tab, Escape
- **ARIA Label**: Email address

---
*Generated by Fluxwing Screenshot Import*
```

---

## Example 3: Multi-Component Login Form

### Input: Vision Analysis Data

```json
{
  "screen": {
    "type": "login-form",
    "name": "Login Screen",
    "description": "User authentication screen with email/password inputs",
    "layout": "vertical-center"
  },
  "components": [
    {
      "id": "email-input",
      "type": "input",
      "category": "atomic",
      "visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Email", "placeholder": "Enter your email" },
      "states": ["default", "focus", "error"],
      "accessibility": { "role": "textbox", "label": "Email address" }
    },
    {
      "id": "password-input",
      "type": "input",
      "category": "atomic",
      "visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Password", "placeholder": "Enter your password" },
      "states": ["default", "focus", "error"],
      "accessibility": { "role": "textbox", "label": "Password" }
    },
    {
      "id": "submit-button",
      "type": "button",
      "category": "atomic",
      "visualProperties": { "width": 20, "height": 3, "borderStyle": "rounded", "textContent": "Sign In" },
      "states": ["default", "hover", "disabled"],
      "accessibility": { "role": "button", "label": "Sign in to account" }
    },
    {
      "id": "login-form",
      "type": "form",
      "category": "composite",
      "visualProperties": { "width": 50, "height": 20, "borderStyle": "rounded", "textContent": "Sign In" },
      "states": ["default"],
      "accessibility": { "role": "form", "label": "Login form" }
    }
  ],
  "composition": {
    "atomicComponents": ["email-input", "password-input", "submit-button"],
    "compositeComponents": ["login-form"],
    "screenComponents": ["login-screen"]
  }
}
```

### Files Generated

1. **Atomic Components:**
   - `./fluxwing/components/email-input.uxm`
   - `./fluxwing/components/email-input.md`
   - `./fluxwing/components/password-input.uxm`
   - `./fluxwing/components/password-input.md`
   - `./fluxwing/components/submit-button.uxm`
   - `./fluxwing/components/submit-button.md`

2. **Composite Component:**
   - `./fluxwing/components/login-form.uxm`
   - `./fluxwing/components/login-form.md`

3. **Screen:**
   - `./fluxwing/screens/login-screen.uxm`
   - `./fluxwing/screens/login-screen.md`
   - `./fluxwing/screens/login-screen.rendered.md`

### Output: login-form.uxm (composite)

```json
{
  "id": "login-form",
  "type": "form",
  "version": "1.0.0",
  "metadata": {
    "name": "Login Form",
    "description": "A form container for collecting user input. Login form",
    "category": "utility"
  },
  "props": {
    "title": "Sign In",
    "components": [
      { "id": "email-input", "slot": "field-1" },
      { "id": "password-input", "slot": "field-2" },
      { "id": "submit-button", "slot": "action" }
    ]
  },
  "ascii": {
    "templateFile": "login-form.md",
    "width": 50,
    "height": 20,
    "variables": [
      {
        "name": "title",
        "type": "string",
        "required": true,
        "default": "Sign In",
        "description": "Form title"
      }
    ]
  }
}
```

### Output: login-form.md (composite)

```markdown
# Login Form

A form container for collecting user input. Login form

## Default State

```
╭────────────────────────────────────────────────╮
│ Sign In                                        │
├────────────────────────────────────────────────┤
│                                                │
│ {{component:email-input}}                      │
│                                                │
│ {{component:password-input}}                   │
│                                                │
│           {{component:submit-button}}          │
│                                                │
╰────────────────────────────────────────────────╯
```

## Variables

- `title` (string, required): Form title
  - Default: "Sign In"

## Accessibility

- **Role**: form
- **Focusable**: No
- **ARIA Label**: Login form

---
*Generated by Fluxwing Screenshot Import*
```

### Output: login-screen.rendered.md

```markdown
# Login Screen

User authentication screen with email/password inputs

## Rendered Example

```
╭────────────────────────────────────────────────╮
│ Sign In                                        │
├────────────────────────────────────────────────┤
│                                                │
│ ┌──────────────────────────────────────┐      │
│ │ Email                                │      │
│ │ john.doe@example.com                 │      │
│ └──────────────────────────────────────┘      │
│                                                │
│ ┌──────────────────────────────────────┐      │
│ │ Password                             │      │
│ │ ••••••••                             │      │
│ └──────────────────────────────────────┘      │
│                                                │
│           ╭──────────────────╮                 │
│           │▓▓▓▓Sign In▓▓▓▓▓▓▓│                 │
│           ╰──────────────────╯                 │
│                                                │
╰────────────────────────────────────────────────╯
```

**Example Data:**
- Email: john.doe@example.com
- Password: ••••••••
- Button: Sign In

**Actions:**
- Submit form → authenticate user
- Focus management → email → password → button

## Components Used

- `email-input` - Email Input (input)
- `password-input` - Password Input (input)
- `submit-button` - Submit Button (button)
- `login-form` - Login Form (form)

---
*Generated by Fluxwing Screenshot Import*
```

---

## Example 4: Checkbox Component

### Input: Vision Analysis Data

```json
{
  "id": "remember-me-checkbox",
  "type": "checkbox",
  "category": "atomic",
  "visualProperties": {
    "width": 20,
    "height": 1,
    "borderStyle": "none",
    "textContent": "Remember me"
  },
  "states": ["default", "checked", "disabled"],
  "accessibility": {
    "role": "checkbox",
    "label": "Remember login credentials"
  }
}
```

### Output: remember-me-checkbox.md

```markdown
# Remember Me Checkbox

A checkbox input for boolean selection. Remember login credentials

## Default State

```
[ ] Remember me
```

## Checked State

```
[✓] Remember me
```

## Disabled State

```
[─] Remember me
```

## Variables

- `text` (string, required): checkbox label text
  - Default: "Remember me"

## Accessibility

- **Role**: checkbox
- **Focusable**: Yes
- **Keyboard Support**: Space
- **ARIA Label**: Remember login credentials

---
*Generated by Fluxwing Screenshot Import*
```

---

## Example 5: Badge Component

### Input: Vision Analysis Data

```json
{
  "id": "new-badge",
  "type": "badge",
  "category": "atomic",
  "visualProperties": {
    "width": 8,
    "height": 1,
    "borderStyle": "none",
    "textContent": "New"
  },
  "states": ["default"],
  "accessibility": {
    "role": "status",
    "label": "New item indicator"
  }
}
```

### Output: new-badge.md

```markdown
# New Badge

A small badge component for labels or counts. New item indicator

## Default State

```
▓ New ▓
```

## Variables

- `text` (string, required): badge label text
  - Default: "New"

## Accessibility

- **Role**: status
- **Focusable**: No
- **ARIA Label**: New item indicator

---
*Generated by Fluxwing Screenshot Import*
```

---

## Usage Patterns

### Pattern 1: Generate Single Atomic Component

```typescript
const timestamp = new Date().toISOString();
const uxmData = generateAtomicUXM(visionComponentData, timestamp);
const mdContent = generateAtomicMD(visionComponentData, uxmData);
await saveAtomicComponent(componentId, uxmData, mdContent);
```

### Pattern 2: Generate All Components from Screen

```typescript
// 1. Generate atomics first
for (const atomicId of composition.atomicComponents) {
  const componentData = components.find(c => c.id === atomicId);
  await generateAtomicComponent(componentData);
}

// 2. Generate composites (can reference atomics)
for (const compositeId of composition.compositeComponents) {
  const componentData = components.find(c => c.id === compositeId);
  await generateCompositeComponent(componentData);
}

// 3. Generate screen (references everything)
await generateScreen(screenData, composition);
```

---

## Reference

These examples demonstrate the complete screenshot-to-uxscii workflow:

1. **Vision analysis** produces structured JSON
2. **Helper functions** (see screenshot-import-helpers.md) transform data
3. **ASCII generation** (see screenshot-import-ascii.md) creates visual representations
4. **File generation** produces valid .uxm + .md pairs
5. **Validation** ensures quality and schema compliance

All generated files conform to:
- `fluxwing/data/schema/uxm-component.schema.json` - JSON Schema
- Quality standards documented in the schema