# 4.2 — Templates

**Previous Step:** ← [Sidebar](../4.1-sidebar/4.1-sidebar.md)
**Next Step:** → [Theme System](../../05-theming/5.1-theme-system/5.1-theme-system.md)

---

## Page Metadata

| Property | Value |
|----------|-------|
| **Scenario** | 04 — File Organization |
| **Page Number** | 4.2 |
| **Platform** | Web (PWA), portable to macOS/Windows |
| **Page Type** | Sidebar Section + Modal (template preview) |

---

## Overview

**Page Purpose:** Provide ready-made starting documents that showcase CalcText's capabilities and help users get productive immediately. Templates are the product's best onboarding tool — they show by example.

**Success Criteria:**
- First-time user finds a relevant template within 10 seconds
- Templates demonstrate the product's unique features (variables, units, currencies, aggregators)
- Using a template creates a new document (never modifies the template)

---

## Template Library

| Template | Description | Showcases |
|----------|-------------|-----------|
| **Budget** | Monthly income/expenses with categories | Variables, aggregators (sum, total), percentages |
| **Invoice** | Service invoice with line items and tax | Variables, multiplication, percentages, currency |
| **Unit Converter** | Common conversions with examples | Unit expressions (kg to lb, km to mi, °C to °F) |
| **Trip Planner** | Travel budget with currency conversion | Currency conversion, date math, variables |
| **Loan Calculator** | Mortgage/loan with monthly payments | Financial functions, percentages, variables |
| **Blank** | Empty document | — (clean start) |

---

## Sidebar Templates Section

**OBJECT ID:** `sidebar-templates`

| Property | Value |
|----------|-------|
| Section header | "Templates" with 📋 icon |
| Collapsible | Yes |
| Default | Expanded on first launch, collapsed after first document created |
| Item height | 32px (slightly taller than files — more padding) |
| Item icon | Colored dot per template (visual distinction) |
| Item label | Template name, text-xs |
| Item sublabel | Brief description, text-3xs, muted, truncated |

### Template Item Interaction

| Action | Behavior |
|--------|----------|
| Click | Create new document from template. Title = template name. Opens in new tab. |
| Hover | Show full description in tooltip |
| Right-click | "Preview" option |

---

## Template Colors (Icon Dots)

| Template | Dot Color |
|----------|-----------|
| Budget | #10b981 (emerald) |
| Invoice | #6366f1 (indigo) |
| Unit Converter | #0d9488 (teal) |
| Trip Planner | #f59e0b (amber) |
| Loan Calculator | #7c3aed (violet) |
| Blank | var(--border) (gray) |

---

## Template Content

### Budget Template
```
# Monthly Budget

// Income
salary = 5000
freelance = 1200
total_income = salary + freelance

// Housing
rent = 1500
utilities = 150
insurance = 80

// Living
groceries = 400
transport = 120
subscriptions = 45

// Summary
total_expenses = sum
savings = total_income - total_expenses
savings_rate = savings / total_income
```

### Invoice Template
```
# Invoice #001

// Client: [Client Name]
// Date: [Date]

// Services
web_design = 2500
development = 4000
consulting = 150 * 8

// Expenses
hosting = 29.99
domain = 12.00

subtotal = sum

// Tax
tax_rate = 10%
tax = subtotal * tax_rate
total = subtotal + tax
```

### Unit Converter Template
```
# Unit Converter

// Weight
75 kg in lb
2.5 lb in kg
100 g in oz

// Distance
10 km in mi
26.2 mi in km
5280 ft in m

// Temperature
100 °C in °F
72 °F in °C
0 °C in K

// Data
1 GB in MB
500 MB in GB
1 TB in GB
```

### Trip Planner Template
```
# Trip Planner

// Budget
budget = $3000

// Flights
flight_out = $450
flight_back = $380

// Hotel
nights = 7
rate_per_night = $120
hotel_total = nights * rate_per_night

// Daily expenses
daily_food = $50
daily_transport = $20
daily_activities = $35
daily_total = daily_food + daily_transport + daily_activities
trip_expenses = daily_total * nights

// Summary
total_cost = flight_out + flight_back + hotel_total + trip_expenses
remaining = budget - total_cost
```

### Loan Calculator Template
```
# Loan Calculator

// Loan Details
principal = 250000
annual_rate = 6.5%
years = 30

// Monthly Calculation
monthly_rate = annual_rate / 12
num_payments = years * 12

// Monthly Payment
monthly_payment = principal * (monthly_rate * (1 + monthly_rate) ^ num_payments) / ((1 + monthly_rate) ^ num_payments - 1)

// Total Cost
total_paid = monthly_payment * num_payments
total_interest = total_paid - principal

// Summary
interest_ratio = total_interest / principal
```

---

## Technical Notes

- Templates are hardcoded in the app (not fetched from server). Stored as string constants.
- Creating from template: deep copy content, assign new id/title, save to documents array.
- Future: user-created templates (save document as template). Defer to v2.
- Cross-platform: same template content across all platforms.

---

_Created using Whiteport Design Studio (WDS) methodology_