# Design System - Page Editor

## Overview
The Page Editor is the main content editing view when users open a blueprint card. It contains a toolbar header and scrollable content blocks. Uses existing typography system for consistency.

**Dimensions:** 1040px × 867px

---

## Component Structure

| Element | Description |
|---------|-------------|
| Container | Main editor wrapper with border |
| Editor Header | Toolbar with navigation and actions |
| Content Area | Scrollable area with content blocks |
| Content Block | Individual editable section |

---

## Page Editor Container

### Specs

| Property | Value |
|----------|-------|
| Width | 1040px |
| Height | 867px |
| Background | #ffffff |
| Border | 1px solid #E5E5E5 |
| Border Radius | 8px |
| Box Shadow | 0 4px 20px rgba(0, 0, 0, 0.06) |
| Overflow | hidden |

### CSS

```css
.page-editor {
  width: 1040px;
  height: 867px;
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
```

---

## Editor Header

### Specs

| Property | Value |
|----------|-------|
| Height | 55px |
| Background | #FAFAFA |
| Border Bottom | 1px solid #E5E5E5 |
| Padding | 0 24px |
| Display | flex |
| Align Items | center |
| Justify Content | space-between |

### Left Section (Navigation & Actions)

| Element | Font Size | Weight | Color | Icon |
|---------|-----------|--------|-------|------|
| Back to strategy | 14px | 400 | #383737 | ← arrow |
| TLDR | 14px | 300 | #383737 | sparkle icon |
| Download | 14px | 300 | #383737 | document icon |
| Refresh | 14px | 300 | #383737 | refresh icon |

**Gap between items:** 24px

### Right Section (View Toggle)

| Element | Size | Color |
|---------|------|-------|
| Grid icon | 18px | #383737 |
| List icon | 18px | #383737 |

**Gap between icons:** 12px

### HTML

```html
<div class="editor-header">
  <div class="header-left">
    <a href="#" class="header-action back-link">
      <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="15 18 9 12 15 6"/>
      </svg>
      <span>Back to strategy</span>
    </a>
    <button class="header-action">
      <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/>
        <path d="M5 19l1 3 1-3 3-1-3-1-1-3-1 3-3 1 3 1z"/>
      </svg>
      <span>TLDR</span>
    </button>
    <button class="header-action">
      <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/>
        <line x1="12" y1="18" x2="12" y2="12"/>
        <line x1="9" y1="15" x2="15" y2="15"/>
      </svg>
      <span>Download</span>
    </button>
    <button class="header-action">
      <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="23 4 23 10 17 10"/>
        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
      </svg>
      <span>Refresh</span>
    </button>
  </div>
  <div class="header-right">
    <button class="view-toggle active" title="Grid view">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="7" height="7"/>
        <rect x="14" y="3" width="7" height="7"/>
        <rect x="3" y="14" width="7" height="7"/>
        <rect x="14" y="14" width="7" height="7"/>
      </svg>
    </button>
    <button class="view-toggle" title="List view">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="8" y1="6" x2="21" y2="6"/>
        <line x1="8" y1="12" x2="21" y2="12"/>
        <line x1="8" y1="18" x2="21" y2="18"/>
        <line x1="3" y1="6" x2="3.01" y2="6"/>
        <line x1="3" y1="12" x2="3.01" y2="12"/>
        <line x1="3" y1="18" x2="3.01" y2="18"/>
      </svg>
    </button>
  </div>
</div>
```

### CSS

```css
.editor-header {
  height: 55px;
  background: #FAFAFA;
  border-bottom: 1px solid #E5E5E5;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #383737;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-action:hover {
  color: #1a1a2e;
}

.header-action.back-link {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.action-icon {
  width: 16px;
  height: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: #9a9a9a;
  transition: background 0.2s ease, color 0.2s ease;
}

.view-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #383737;
}

.view-toggle.active {
  color: #383737;
}

.view-toggle svg {
  width: 18px;
  height: 18px;
}
```

---

## Content Area

### Specs

| Property | Value |
|----------|-------|
| Flex | 1 |
| Overflow Y | auto |
| Padding | 32px 48px |
| Background | #ffffff |

### CSS

```css
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px;
  background: #ffffff;
}
```

---

## Content Block

Each content block represents an editable section with a title and body text.

### Specs

| Property | Value |
|----------|-------|
| Margin Bottom | 32px |
| Position | relative |

### Block Handle (+ and drag)

| Property | Value |
|----------|-------|
| Position | absolute |
| Left | -32px |
| Top | 0 |
| Display | flex |
| Gap | 4px |
| Opacity | 0 (visible on hover) |

**Plus Icon:**
| Property | Value |
|----------|-------|
| Width | 14px |
| Height | 14px |
| Color | #9a9a9a |

**Drag Handle:**
| Property | Value |
|----------|-------|
| Width | 10px |
| Color | #9a9a9a |
| Display | 6 dots (2x3 grid) |

### Block Title

Uses H2 Heading from Typography system:

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 18px |
| Font Weight | 700 |
| Color | #1a1a1a |
| Margin Bottom | 12px |

### Block Body

Uses Body from Typography system:

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 14px |
| Font Weight | 400 |
| Line Height | 1.7 (24px) |
| Color | #4a4a4a |

### HTML

```html
<div class="content-block">
  <div class="block-handle">
    <button class="handle-btn add-btn" title="Add block">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
    </button>
    <button class="handle-btn drag-btn" title="Drag to reorder">
      <svg viewBox="0 0 10 14" fill="currentColor">
        <circle cx="2" cy="2" r="1.5"/>
        <circle cx="8" cy="2" r="1.5"/>
        <circle cx="2" cy="7" r="1.5"/>
        <circle cx="8" cy="7" r="1.5"/>
        <circle cx="2" cy="12" r="1.5"/>
        <circle cx="8" cy="12" r="1.5"/>
      </svg>
    </button>
  </div>
  <h3 class="block-title">Background</h3>
  <p class="block-body">
    Skincare has become a regular part of everyday life for many people. Social media, online reviews,
    and influencer content have made it easier than ever to discover new products and routines. As a
    result, people are more engaged with skincare than before — but also more uncertain. Most people
    don't struggle with finding skincare advice. They struggle with understanding whether what they're
    doing is actually working for them.
  </p>
</div>
```

### CSS

```css
.content-block {
  position: relative;
  margin-bottom: 32px;
  padding-left: 32px;
}

.content-block:last-child {
  margin-bottom: 0;
}

.block-handle {
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.content-block:hover .block-handle {
  opacity: 1;
}

.handle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #9a9a9a;
  border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease;
}

.handle-btn:hover {
  color: #383737;
  background: rgba(0, 0, 0, 0.05);
}

.add-btn svg {
  width: 14px;
  height: 14px;
}

.drag-btn {
  cursor: grab;
}

.drag-btn:active {
  cursor: grabbing;
}

.drag-btn svg {
  width: 10px;
  height: 14px;
}

.block-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.block-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}
```

---

## Complete Page Editor HTML

```html
<div class="page-editor">
  <div class="editor-header">
    <div class="header-left">
      <a href="#" class="header-action back-link">
        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        <span>Back to strategy</span>
      </a>
      <button class="header-action">
        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/>
        </svg>
        <span>TLDR</span>
      </button>
      <button class="header-action">
        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
        </svg>
        <span>Download</span>
      </button>
      <button class="header-action">
        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="23 4 23 10 17 10"/>
          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
        </svg>
        <span>Refresh</span>
      </button>
    </div>
    <div class="header-right">
      <button class="view-toggle active" title="Grid view">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="3" width="7" height="7"/>
          <rect x="14" y="3" width="7" height="7"/>
          <rect x="3" y="14" width="7" height="7"/>
          <rect x="14" y="14" width="7" height="7"/>
        </svg>
      </button>
      <button class="view-toggle" title="List view">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="8" y1="6" x2="21" y2="6"/>
          <line x1="8" y1="12" x2="21" y2="12"/>
          <line x1="8" y1="18" x2="21" y2="18"/>
          <line x1="3" y1="6" x2="3.01" y2="6"/>
          <line x1="3" y1="12" x2="3.01" y2="12"/>
          <line x1="3" y1="18" x2="3.01" y2="18"/>
        </svg>
      </button>
    </div>
  </div>

  <div class="content-area">
    <!-- Content blocks go here -->
  </div>
</div>
```

---

## Design Tokens

### Colors

| Token | Value | Usage |
|-------|-------|-------|
| `--color-editor-bg` | #ffffff | Editor background |
| `--color-editor-border` | #E5E5E5 | Container border |
| `--color-header-bg` | #FAFAFA | Header background |
| `--color-text-title` | #1a1a1a | Block titles |
| `--color-text-body` | #4a4a4a | Block body text |
| `--color-text-action` | #383737 | Header actions |
| `--color-handle` | #9a9a9a | Block handles |

### Typography

| Element | Font | Size | Weight | Line Height |
|---------|------|------|--------|-------------|
| Header Action | Space Grotesk | 14px | 300 | 1.4 |
| Back Link | Space Grotesk | 14px | 400 | 1.4 |
| Block Title | Space Grotesk | 18px | 700 | 1.3 |
| Block Body | Space Grotesk | 14px | 400 | 1.7 |

### Spacing

| Token | Value |
|-------|-------|
| Header height | 55px |
| Header padding | 0 24px |
| Header action gap | 24px |
| Content padding | 32px 48px |
| Block margin bottom | 32px |
| Block padding left | 32px |
| Title margin bottom | 12px |

### Dimensions

| Token | Value |
|-------|-------|
| Editor width | 1040px |
| Editor height | 867px |
| Border radius | 8px |
| Icon size (action) | 16px |
| Icon size (view toggle) | 18px |

---

## Interaction States

### Header Actions
- **Default:** color #383737, weight 300
- **Hover:** color #1a1a2e
- **Back link:** underlined, weight 400

### View Toggle
- **Default:** color #9a9a9a
- **Hover:** background rgba(0,0,0,0.05), color #383737
- **Active:** color #383737

### Content Block Handles
- **Default:** opacity 0
- **Block Hover:** opacity 1
- **Handle Hover:** color #383737, background rgba(0,0,0,0.05)
- **Drag active:** cursor grabbing

---

## Prototype
`page-editor-prototype/index.html`