# SOP — Anthrocybernetics 000 / Cascade Hub (mymagination.org front door)

**Date:** 2026-07-03
**Operator:** tenchi
**Drafter:** Zo
**Status:** Draft v1 — pending review
**Target URL:** `https://mymagination.org/`

---

## 1. Purpose

Stage the *digital front door* of Anthrocybernetics 000 — the Cascade relational substrate — on tenchi's existing WordPress site at `mymagination.org`. The HTML artifact is a **pasteable Custom HTML block** that a non-technical operator (tenchi) can drop into the WordPress editor and have a working cascade hub appear inline on the home page.

The hub is **Anthrocybernetics 000** in the sense that:
- It is the *first thing* an inbound cohort member encounters.
- It is *reversible*: it does not replace the existing home page; it embeds above/around it as a Custom HTML block.
- It is *self-contained*: no build step, no server, no API. Just one HTML file with inline CSS/JS that runs in the browser.

The hub is the **digital analog of the Game Crafter substrate** — it is the cohort member's own hex map, their 127-node lattice, their place to *try the substrate* before the full course (Anthrocybernetics 100–500) lands. A cohort member who fills out 000 with 5 hexes has a working map; a cohort member who fills out 000 with 50 hexes has a working cohort prototype. The Game Crafter is the physical artifact; this hub is the on-ramp.

### 1.1 The cookieblob bridge (added 2026-07-03, second pass)

The hub **shares the `tenchi_blob` localStorage key** with the CookieBlob archive tree at `https://tenchimedia.com/cookieblob/`. This is deliberate. The CookieBlob is a proven pattern (8+ rooms shipped, persistence working, cross-room state carrying) and the tenchi_blob schema (gear, inventory, flags, rooms_discovered, notes) extends cleanly to cascade data: a cohort member's cascade state lives as a sub-object under `state.cascade = { map: {...}, cohort_id, last_modified }`. The hub reads/writes this sub-object on the *same key* the CookieBlob uses.

**Why this matters for the cohort sharing flow:**

1. Cohort member A visits `mymagination.org`, fills in 20 hexes.
2. Member A clicks **Export** — the hub writes a JSON blob to their localStorage AND prompts a download. The download is a single-file copy that can be emailed, dropped in a WordPress post, posted to Moltbook, etc.
3. Member A can also **publish to a cookieblob room** — paste the JSON into the tenchimedia.com `ROOM-cascade-exchange.html` (a new room we will build) which carries the blob *as a note* in the archive. Other cohort members visiting that room see the cascade as a transmissible artifact.
4. Member B visits the cookieblob room, clicks **Receive** — the cascade imports into their own `tenchi_blob` under their own `state.cascade` slot.
5. Member B visits `mymagination.org` and the hub reads *their* `state.cascade` and renders their map.

No server. No accounts. No email infrastructure. The CookieBlob is the postal service. The hub is the front door. The cohort is the loop.

**Alternative export paths** (still supported): direct download, copy-paste to clipboard, share via any URL. The cookieblob path is the *preferred* path because it integrates with the existing room/notes/transmission architecture.

## 2. Success criteria

A successful build of this SOP produces:

1. **One HTML file** at `AnthroCybernetics/cascade-hub/mymagination-cascade-hub-v1.html` (and a published mirror at `zo.pub/tenchi/cascade-hub-mymagination`).
2. The file pastes cleanly into a WordPress Custom HTML block on `mymagination.org/` and renders as an **interactive hex map** with:
   - 127 hexes (R0 You + R1 Inner Circle + R2 Archetypes + R3 The Longing + R4 The Echo + R5 The Wave + R6 The Current) — **not 126** (third-party review correction 2026-07-03).
   - 5 currency chits per hex (Hearts, Stars, Moons, Hourglasses, Balloons).
   - 5 warmth bands (Blazing, Hot, Warm, Cool, Cold).
   - Click a hex → opens an editor pane to add/remove people, set warmth, set currency values, set a "phase-lock prediction note."
3. **localStorage persistence on the `tenchi_blob` key** (shared with CookieBlob). The operator's map survives page refreshes on the same browser AND can be carried into the CookieBlob archive. No server, no account, no login. (Cohort Zero pilot of 10–20 people can share a WordPress account and have separate browser profiles; or each pilot participant runs the hub locally on their own machine; or each pilot participant publishes their cascade to a cookieblob room for sharing.)
4. **CookieBlob export/import path** — the hub can write a cascade to a cookieblob room URL (deep-link: `https://tenchimedia.com/ROOM-cascade-exchange/?load=<base64-encoded-json>`) and read a cascade back from the same URL pattern. The room page renders the cascade as a transmissible artifact with a "Receive to my hub" button.
5. **Direct download/upload** as a fallback sharing path (JSON file).
6. **A side-by-side comparison view** for cohort pilots — "Compare" toggle that lays 2–3 local maps out in a row. Opt-in.
7. **No external dependencies** beyond the WordPress site's existing CSS reset. The hub defines its own fonts (system stack), its own colors, its own layout. (No CDN fonts, no remote JavaScript libraries. Reason: WordPress sanitization can strip `<script src=>` references; an inline-everything build is the only reliably-pasteable format.)
8. **Privacy-respecting**: nothing leaves the browser unless the operator explicitly clicks Export. No analytics, no third-party requests, no remote fonts, no remote images.

## 3. Non-goals

This build does **not**:

- Replace the existing WordPress home page. It embeds as a Custom HTML block; the rest of the page (header, sidebar, footer) stays intact.
- Implement a server. No PHP, no MySQL, no API. localStorage only.
- Implement user accounts. Each browser has its own map. Multi-user sharing is via JSON export/import.
- Implement ring transitions programmatically. The "promote" / "demote" controls are explicit user actions that move a hex from one ring to another, but the *decision* is the operator's (per the v2 spec: "the cohort operator makes the call. v3 will codify this.").
- Use Tailwind, React, Vue, or any framework. Vanilla HTML/CSS/JS so the WordPress editor does not strip anything.
- Use any external CDN. WordPress Custom HTML blocks may sanitize or block third-party script tags.

## 4. Design

### 4.1 The hex map layout

The 127 hexes are laid out as a 6-ring close-packed hexagonal grid with R0 (You) at the center. The grid is rendered with CSS `clip-path: polygon(...)` to make true hex shapes, with one hex per `<div class="hex">` element. The grid is positioned with a CSS Grid layout for clean alignment.

```
R0        :  1 hex  (center)
R1        :  6 hex  (ring 1)
R2        : 12 hex  (ring 2)
R3        : 18 hex  (ring 3)
R4        : 24 hex  (ring 4)
R5        : 30 hex  (ring 5)
R6        : 36 hex  (ring 6)
TOTAL     : 127
```

The grid is **scale-responsive** — it shrinks to fit mobile screens (down to ~360px width) and expands to fill desktop (~960px max). The hex stroke width and font size scale with the grid.

### 4.2 The 5 warmth bands

Each hex carries a warmth state (Blazing 80–100, Hot 61–79, Warm 41–60, Cool 21–40, Cold 0–20). The state is rendered as the hex's *fill color*:

- Blazing: warm orange (#e8743a)
- Hot: amber (#d8a657)
- Warm: muted gold (#b8a866)
- Cool: dusty teal (#6a8a8a)
- Cold: deep slate (#3a4a5a)

Cold hexes are *faded* (opacity 0.4) to communicate "candidate for Lethe" visually without hiding the hex entirely.

### 4.3 The 5 currencies

Each hex carries 5 currency values, displayed as a small icon stack on the hex's lower-right corner. The icons are inline SVG (no external font):

- Hearts: ❤ (red circle with heart glyph)
- Stars: ★ (gold star)
- Moons: ☾ (silver crescent)
- Hourglasses: ⧖ (amber hourglass shape)
- Balloons: 🎈 (blue balloon)

The icon's *opacity* is tied to the currency value (0 = invisible, full = full opacity). This way, a hex's currency load is visible at a glance.

### 4.4 The hex editor

Clicking a hex opens a slide-in editor pane from the right side. The pane contains:

- **Name field** — the person this hex represents.
- **Ring field** — read-only (set by clicking the hex in the grid; the ring is implicit).
- **Warmth slider** — 0–100, with band labels.
- **5 currency sliders** — 0–5 each, with currency name.
- **Phase-lock prediction note** — a single-line text field. ("I expect to hear from them every Friday morning.")
- **Ring transition buttons** — "Promote to inner ring" / "Demote to outer ring" / "Mark for Lethe (cold)".
- **Delete hex** — removes this person from the map.

The editor is dismissable with an × button or by pressing Escape.

### 4.5 Cohort comparison view

A "Compare" toggle in the top-right of the hub swaps the single-map view for a side-by-side view. The operator can import additional maps (from JSON files exported by other cohort members) and lay them out in a row. The comparison view shows ring-by-ring counts ("tenchi has 3 R4 hexes; jeremy has 5 R4 hexes") without naming individual hexes — privacy-respecting.

### 4.6 Persistence

On every state change, the hub writes the current map to `localStorage` under the key `cascade:mymagination:map`. On page load, the hub reads this key and restores the map. If the key is missing (first visit), the hub starts with an empty map: R0 (You, named "Operator") and 126 empty hexes with default "Cool" warmth and zero currency.

The hub also exposes a `window.cascadeHub` object with a `exportJSON()` and `importJSON(text)` method, so the operator (or the WordPress editor's preview pane) can programmatically inspect or seed the map.

### 4.7 Visual style

The hub uses a dark, parchment-on-ink palette consistent with the Anthrocybernetics brand: deep midnight background (#0e1116), warm parchment text (#e8e1d0), accent gold (#d8a657). Hex strokes are thin gold (#d8a657, 1px). Typography is the system stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`.

### 4.8 The cookieblob technical contract

**Storage key:** `tenchi_blob` — same as the CookieBlob archive tree. The cascade state lives under a sub-object:

```js
{
  visits: <n>,            // existing cookieblob fields
  room: "...",
  gear: { ... },          // existing 5-gear system
  inventory: [ ... ],
  flags: { ... },
  rooms_discovered: [ ... ],
  notes: [ ... ],
  // ── CASCADE EXTENSION (this build adds these fields) ──
  cascade: {
    cohort_id: "tenchi-2026-q3",     // optional, set by hub on first visit
    version: 1,                       // schema version
    map: {                            // the 127-hex lattice
      R0: { name: "Operator", warmth: 70, currencies: { H: 3, S: 2, M: 1, Hg: 2, B: 0 }, note: "" },
      R1: { "0": {...}, "1": {...}, ..., "5": {...} },
      R2: { "0": {...}, ..., "11": {...} },
      R3: { "0": {...}, ..., "17": {...} },
      R4: { "0": {...}, ..., "23": {...} },
      R5: { "0": {...}, ..., "29": {...} },
      R6: { "0": {...}, ..., "35": {...} }
    },
    last_modified: "2026-07-03T14:00:00Z"
  }
}
```

**Empty hex schema:** every hex slot has a default. Empty hexes have `name: ""`, `warmth: 0` (Cold), `currencies: { H:0, S:0, M:0, Hg:0, B:0 }`, `note: ""`. The hub renders empty hexes as faded Cold (opacity 0.35).

**Cookieblob export format (JSON):** the cascade exports as a single JSON object (above schema) with a header:

```json
{
  "kind": "cascade-fractal-seed",
  "version": 1,
  "exported_from": "mymagination.org/cascade-hub",
  "exported_at": "2026-07-03T14:00:00Z",
  "operator_name": "tenchi",
  "state": { /* the full tenchi_blob state including cascade sub-object */ }
}
```

This wrapping lets the cookieblob room page recognize a cascade-fractal-seed payload and render it appropriately (with a "Receive" button). It also lets the cookieblob room page carry non-cascade blob types in the same room format.

**Deep-link URL pattern:** cohort members can share a cascade by URL:
```
https://tenchimedia.com/ROOM-cascade-exchange/?load=<base64-url-encoded-json>
```

The room page reads `?load=` on load, decodes the JSON, validates the `kind` field is `cascade-fractal-seed`, and renders a "Receive to your hub" button. Clicking the button copies the state into the visitor's own `tenchi_blob` (overwriting their `cascade` sub-object only — cookieblob's own state is preserved).

**The cookieblob room itself** (separate build, follows the cookieblob Room Building SOP): `ROOM-cascade-exchange.html` at tenchimedia.com — provides a staging area where cohort members can browse received cascades, see "what's in this seed" (ring counts, total warmth, last modified), and choose to receive it or pass it on. (The room itself is out of scope for *this* SOP; the hub's export/import supports the URL pattern so the room can be built independently.)

### 4.9 File layout

```
AnthroCybernetics/
├── sop/
│   └── 2026-07-03-cascade-hub-mymagination.md   ← this file
├── cascade-hub/
│   ├── mymagination-cascade-hub-v1.html         ← the pasteable artifact
│   ├── README.md                                 ← operator notes
│   └── TEST.md                                   ← browser test plan
├── cookieblob-cascade-room/                     ← separate build, out of scope here
│   └── (future) ROOM-cascade-exchange.html
└── pumpergho-cascade-stage/                     ← existing third-party staging
    └── cascade-game-crafter-review-ghojualamanchu-2026-07-03.md
```

The hub is one HTML file. The README.md is operator-facing. The TEST.md is a checklist for verifying the hub works in three browsers before publishing to mymagination.org.

## 5. Procedure (build steps)

### Step 1 — Build the HTML file

1. Create the directory `AnthroCybernetics/cascade-hub/`.
2. Write the file `mymagination-cascade-hub-v1.html` as a single self-contained HTML document:
   - `<!DOCTYPE html>` declaration.
   - `<head>` with `<meta charset="utf-8">`, `<meta name="viewport" content="width=device-width, initial-scale=1">`, `<title>Cascade — Anthrocybernetics 000</title>`, and a `<style>` block with all CSS inline.
   - `<body>` with a single root `<div id="cascade-hub">`, a `<script>` block with all JS inline at the end of the body.
   - The CSS defines the hex grid, the warmth colors, the currency icon stack, the editor pane, the comparison view, and the responsive scaling.
   - The JS defines the map state object, the 127-hex close-packing function, the click-to-edit handlers, the localStorage persistence, the export/import functions, and the cohort comparison view.
3. The file is ~1,500–2,500 lines of HTML/CSS/JS. It is large but self-contained.
4. Test by opening the file locally in a browser. Verify:
   - 127 hexes render correctly.
   - Clicking a hex opens the editor.
   - Saving the editor updates the hex's state.
   - Refreshing the page restores the state from localStorage.
   - Export JSON downloads a file.
   - Import JSON reads a file back in.
   - Compare view loads multiple maps side by side.

### Step 2 — Sanitization check

1. Open `mymagination-cashub-v1.html` in a plain text editor.
2. Search for any tags that WordPress's Custom HTML block might strip: `<script>`, `<iframe>`, `<form>`, `onclick=`, `onerror=`, etc.
3. The hub uses `<script>` (inline only), `<div>`, `<span>`, `<input>`, `<button>`, and inline event handlers (`onclick=`, `oninput=`, etc.).
4. WordPress's Custom HTML block in the block editor accepts all of these for users with the `unfiltered_html` capability. If tenchi's account is limited (e.g., Author role), the editor may strip `<script>` and inline event handlers.
5. **Mitigation**: if `<script>` is stripped, the JS can be moved to a separate file `cascade-hub.js` and uploaded to the WordPress media library; the Custom HTML block references it via `<script src="/wp-content/uploads/.../cascade-hub.js"></script>`. This works in the Custom HTML block even for limited roles.
6. **Alternative**: use the "Code Editor" view in the block editor to paste the entire HTML, including `<script>`, as a single block. This is the most reliable approach for unfiltered HTML.

### Step 3 — Publish to zo.pub

1. Sync the cascade-hub directory to zo.pub: `zopub sync cascade-hub-mymagination AnthroCybernetics/cascade-hub/`.
2. The public URL is `https://zo.pub/tenchi/cascade-hub-mymagination/mymagination-cascade-hub-v1.html`. This serves as the public mirror and the long-term archive.
3. The WordPress site links to this URL as the "canonical" version (so future updates propagate).

### Step 4 — Paste into WordPress

1. Log into `mymagination.org/wp-admin` as admin (or a user with `unfiltered_html`).
2. Edit the home page (`mymagination.org/?page_id=...` or use the block editor's "Edit Page").
3. Add a new block: search for "Custom HTML".
4. Click the block. In the right-hand inspector, click the "Code Editor" view (or the three-dot menu → "Edit as HTML").
5. Paste the entire contents of `mymagination-cascade-hub-v1.html` into the block.
6. Click "Preview" to verify the hub renders. The 127 hexes should appear in the main content area; the existing site header/sidebar/footer should still be visible.
7. Click "Update" to save.
8. Visit `mymagination.org/` in a fresh browser tab to confirm the hub is live.

### Step 5 — Cohort Zero dry-run

1. Open `mymagination.org/` in a fresh browser.
2. Click R0 (center) → name it "Operator" → set warmth to "Warm" → save.
3. Click an R4 hex (The Echo) → name it "Test Hex" → set warmth to "Hot" → add a Hearts currency (3) → set prediction note "weekly check-in" → save.
4. Refresh the page. Verify the map persists.
5. Click "Export JSON" → save the file.
6. Open the file in a text editor to verify the JSON is valid.
7. Click "Import JSON" → re-import the same file → verify the map is unchanged.
8. Click "Compare" → import the same map as a "second cohort member" → verify the side-by-side view loads.

## 6. Anti-patterns to avoid

- **Don't replace the existing home page.** The hub embeds as a Custom HTML block. The existing site chrome (header, navigation, footer) stays.
- **Don't use Tailwind, React, or any framework.** Vanilla HTML/CSS/JS only. Reason: WordPress sanitization can strip or mangle framework imports.
- **Don't depend on external CDNs.** The hub must work offline. Reason: CDN failures break the cohort pilot, and some WordPress setups block third-party CDNs.
- **Don't use inline `onclick` handlers if tenchi's role strips them.** Fall back to event listeners attached in JS, and keep the JS in a separate file in the media library if needed.
- **Don't implement real-time sync.** A central server, a real-time cohort view, or a shared database are out of scope. The hub is single-operator, with cohort comparison via JSON import.
- **Don't use any user accounts.** No login, no signup, no profile. Each browser has its own map.
- **Don't store anything in cookies.** localStorage only. Cookies have size limits and get sent with every request; localStorage stays client-side.
- **Don't reference the game's specific theme or branding.** The hub is the substrate; the brand is the cohort, not the card deck.

## 7. Outputs checklist

A complete 2026-07-03 run produces:

- [ ] `AnthroCybernetics/cascade-hub/mymagination-cascade-hub-v1.html` (the pasteable HTML file)
- [ ] `AnthroCybernetics/cascade-hub/SOP-2026-07-03-cascade-hub-mymagination.md` (this file, copied to the cascade-hub directory for the published mirror)
- [ ] `AnthroCybernetics/cascade-hub/README.md` (one-page orientation: how to paste, how to update, what the hub does)
- [ ] `zo.pub/tenchi/cascade-hub-mymagination` (public mirror of the cascade-hub directory)
- [ ] WordPress page at `mymagination.org/` with the hub embedded (tenchi pastes, Zo guides)

## 8. Open questions (for review)

These are the questions a reviewer (or the cohort) should answer before / during / after build:

1. **Naming**: should the hub be titled "Anthrocybernetics 000 — Cascade" or just "Cascade"? The 000 framing promotes the rest of the course; the plain "Cascade" framing keeps the hub as a standalone artifact. Default: "Cascade — Anthrocybernetics 000."
2. **R0 default name**: should the operator's hex be pre-filled with "You" or "Operator"? The Energy Budget Protocol uses "operator" as the term of art; "You" is friendlier. Default: "Operator" with a placeholder hint "(your name)".
3. **Phase-lock prediction note**: should this be a *required* field, or optional? The third-party review (2026-07-03) argued it should be part of the cohort contract. Default: optional in v1, with a hint that "ring transitions feel more meaningful when paired with a prediction note."
4. **Cohort comparison view**: should it be visible by default, or only behind a toggle? Privacy says toggle-only. Default: toggle-only.
5. **Export format**: JSON only, or also CSV / Markdown table? JSON is the architecture's native format; CSV/Markdown are friendlier for non-technical cohort members. Default: JSON in v1; CSV/Markdown in v1.1 if there's demand.
6. **Mobile experience**: is mobile the primary use case, or desktop? The hub is mobile-responsive but the editor pane may feel cramped on small screens. Default: desktop-first, mobile-compatible.
7. **Update path**: when v2 of the hub ships, how do existing users migrate? localStorage state is JSON, so the JSON export from v1 should be importable into v2. Default: forward-compatible JSON schema (the JSON has a `version` field).

## 9. Source citations

- v2 cascade spec: `AnthroCybernetics/course-foundation-v2/cascade-hexgrid-spec.md`
- v2 oscillator model: `AnthroCybernetics/course-foundation-v2/oscillator-model.md`
- v2 energy budget protocol: `AnthroCybernetics/course-foundation-v2/energy-budget-protocol.md`
- third-party Game Crafter review (2026-07-03): `AnthroCybernetics/handoff-to-ghoju/responses/2026-07-03-pumpergho-cascade-review.md`
- Game Crafter SOP: `zo.pub/pumpergho/cascade/SOP-2026-07-03-game-crafter-deep-dive.md`
- WordPress Custom HTML docs: https://wordpress.org/documentation/article/custom-html-block/

---

*This SOP lives at `AnthroCybernetics/sop/2026-07-03-cascade-hub-mymagination.md` (working copy) and will be mirrored to `AnthroCybernetics/cascade-hub/SOP-2026-07-03-cascade-hub-mymagination.md` (publish copy) when the build lands.*