---
auto_generated: true
created: 2026-05-18
manual_updated_at: 2026-05-18
modified: 2026-05-18
name: Developer_Manual
status: active
tags:
- client/hm
- tech/typescript
- type/sop
type: sop
---

# DEVELOPER_MANUAL: H&M O2E Tool (OMG Static)

## Architecture Overview

OMG Static is a client-side web application that interacts with the One2Edit API to manage H&M documents. It relies on a session-based workflow for all document operations to ensure data integrity.

### Core Workflow
All document modifications follow this sequence:
1. **Open**: `document.session.open` creates an edit session.
2. **Operate**: Perform operations (relink, export, etc.) using the obtained `session_id`.
3. **Save**: `document.session.save` commits changes.
4. **Close**: `document.session.close` releases the session.

## Tech Stack

- **Frontend**: Vanilla HTML5, CSS3, JavaScript (ES6+)
- **API Integration**: Fetch API / XMLHttpRequest for One2Edit REST endpoints
- **Build Tool**: None (Static distribution)
- **Testing**: Browser DevTools (Primary)

## Local Setup

1. **Prerequisites**: 
   - A modern web browser (Chrome, Firefox, Edge)
   - Access to the One2Edit API
2. **Installation**:
   - Clone the repository.
   - No `npm install` is required.
   - Simply open `index.html` in your browser.
3. **Configuration**:
   - Ensure API credentials are loaded via `config.js` or environment variables as specified in the configuration section of the codebase. 
   - *Note: The provided README snippet cuts off at "con", implying configuration details are in `config.json` or similar.*

## Environment Variables

The tool expects configuration parameters to be defined. Based on standard patterns for this project type, the following are likely required:

| Variable | Description | Example |
|----------|-------------|---------|
| `ONE2EDIT_API_URL` | Base URL for the One2Edit API | `https://api.one2edit.com/v1` |
| `API_KEY` | Authentication key for the API | `your_api_key_here` |
| `ASSET_HM_SRGB_LOGO` | Hardcoded ID for H&M sRGB Logo | `68626a50da85f5bf560161ed` |
| `ASSET_HM_CMYK_LOGO` | Hardcoded ID for H&M CMYK Logo | `68626a4a0eb4d535b80789cb` |

*Check `config.js` or the codebase's configuration loader for the exact implementation.*

## Key Services & Entry Points

### Image Matching Service
Located in the image linking logic, this service handles asset resolution:
1. **Logo Detection**: Checks if the missing asset is a known H&M logo and returns the hardcoded ID.
2. **Generic Matching**: 
   - Parses the campaign folder structure.
   - Searches `Assets/[Campaign Folder Name]/Links/RGB` and `CMYK`.
   - Applies fuzzy matching algorithms to find the best file match.

### Document Session Manager
Handles the lifecycle of document edits. It abstracts the API calls for `open`, `save`, and `close` sessions, ensuring that state is properly managed during batch operations.

### Export Handlers
- **INDD Exporter**: Iterates through folder contents and triggers the One2Edit export endpoint for InDesign format.
- **PDF Exporter**: Similar to INDD but applies post-processing filters (R100 → RATIOS transformation).

## API Reference

### One2Edit Document Operations

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/document/session/open` | POST | Creates a new session. Returns `session_id`.
| `/document/session/save` | POST | Commits changes to the document. Requires `session_id`.
| `/document/session/close` | POST | Terminates the session. Requires `session_id`.
| `/image/relink` | POST/GET | Initiates image relinking logic.
| `/image/status` | POST/GET | Retrieves image link status for a folder.
| `/export/indd` | POST/GET | Triggers InDesign export.
| `/export/pdf` | POST/GET | Triggers PDF export with R100 filtering.
| `/validate/ratio` | POST/GET | Validates image aspect ratios.

*Note: Exact endpoint URLs and payload structures should be verified against the live One2Edit API documentation.*

## Deployment

- **Static Hosting**: The tool is entirely client-side. It can be deployed to any static web host (e.g., GitHub Pages, Nginx, Apache, AWS S3).
- **No Backend Required**: The browser handles all API communication directly from the client.
- **CORS Considerations**: Ensure the One2Edit API allows requests from your deployment domain. If not, a proxy server may be required.

## Known Gotchas

1. **Hardcoded Assets**: The H&M logos are hardcoded to specific asset IDs. If these assets are deleted or moved in the One2Edit system, logo relinking will fail. Monitor asset IDs periodically.
2. **Session Limits**: Be aware of One2Edit API rate limits or concurrent session limits. Batch processing many files may require delays between requests.
3. **Browser Console**: Since this is a static tool, all logs and errors are in the browser's developer console. Use this for debugging.
4. **Configuration Security**: Never commit API keys or sensitive configuration to version control. Use `.env` files (if using a build step) or server-side proxies for credential protection in production.
5. **Fuzzy Matching Accuracy**: For generic images, the quality of the relink depends on the folder structure and filename conventions. Poorly organized `Assets/` folders may result in incorrect matches.
6. **PDF Export Name Transformation**: The `R100` → `RATIOS` transformation is hardcoded in the export logic. If branding guidelines change, this logic must be updated in the source code.

## Related
- [[resources/one2edit-api-reference]]