Regions

```code:hash-fn lang=ts
function hash(key: string): number {
  let h = 0
  for (const ch of key) {
    h = (h * 31 + ch.charCodeAt(0)) | 0
  }
  return h
}
---
signature: 1
init: 2
loop: 3-5
return-val: 7
```

content here
---
region-name: target-spec
another-region: target-spec

signature: 1
return-val: 7

loop: 3-5
imports: 1-4

error-handling: 1, 4-6, 9
setup-teardown: 2-3, 15-17

```code:dijkstra lang=ts
function dijkstra(graph: Graph, start: string) {
  const dist = new Map<string, number>()
  for (const node of graph.nodes) {
    dist.set(node, node === start ? 0 : Infinity)
  }
  const visited = new Set<string>()
  
  while (visited.size < graph.nodes.length) {
    const current = pickMinUnvisited(dist, visited)
    if (!current) break
    visited.add(current)
    
    for (const neighbor of graph.neighbors(current)) {
      const alt = dist.get(current)! + graph.weight(current, neighbor)
      if (alt < dist.get(neighbor)!) {
        dist.set(neighbor, alt)
      }
    }
  }
  return dist
}
---
signature: 1
init: 2-5
visited-set: 6
pick: 9-11
relax: 13-17
check: 15
update: 16
return: 20
```

```data:names type=array
["Alice", "Bob", "Dana", "Eve"]
^check=0
---
first: 0
last: 3
middle: 1, 2
```

```data:chain type=linked-list
(head Alice) -> (n2 Bob) -> (n3 Charlie) -> null
---
first: head
second: n2
tail: n3
middle-nodes: n2, n3
```

```data:bst type=tree variant=bst
(7)
  (3)
    (1)
    (5)
  (10)
    (8)
    (15)
---
root: 7
left-subtree: 3, 1, 5
right-subtree: 10, 8, 15
leaf-parent: 3
```

```data:network type=graph layout=force
A -> B, C: 5
B -- D
C -> D: 3
---
entry: A
exits: C, D
path-a-b-d: A, B, D
```

```diagram:system
client [client]
gw [api-gateway]
api [service]
db [database]
cache [cache]

client --> gw
gw --> api
api --> db
api --reads--> cache

{Backend: gw, api, db, cache}
---
storage: db
fast-path: cache
gateway: gw
backend: gw, api, db, cache
```

```math:formulas
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

y = mx + b

E = mc^2
---
quadratic: expr-0
linear: expr-1
energy: expr-2
```

```chart:quarterly type=bar
Q1: 100
Q2: 150
Q3: 120
Q4: 200
---
growth: Q2, Q3
peak: Q2
first-half: Q1, Q2
```

signature: 1
init: 2-3
loop: 4-8
return-val: 10

line-1: 1
top-part: 2-3
middle-section: 4-8
the-important-bit: 10

setup: 1-3
main-loop: 5-15
greedy-choice: 7-9
relaxation: 11-13
cleanup: 17-19

root: root-id
left-subtree: node-1, node-2, node-3
right-subtree: node-4, node-5
unbalanced: node-6

entry-point: client
gateway-layer: api-gw, load-balancer
data-layer: db, cache
request-path: client, api-gw, service, db

{{focus: signature}} It takes a string and returns a number.
{{focus: loop}} The loop processes each character.
{{focus: return-val}} Finally, return the hash value.

{{pulse: swap-pair}} Compare parent and child.

{{annotate: greedy-choice "Key decision"}} This is where we pick the minimum.

{{zoom: loop 1.3x}} Let's zoom in on the loop body.

{{flow: request-path}} The request flows from client to gateway to service.

{{trace: bfs-path}} Watch BFS explore the graph.

{{draw: edge-a-b}} First, connect A to B.

{{pan: far-cluster}} Now look at this distant cluster.

path-a-b-d: A, B, D
shortest-path: A, C, B, D, E, F

find-path: root, left-child, left-left-child

request-flow: client, gateway, service, database

{{flow: request-flow}} The request flows through the system.

{{trace: shortest-path}} This is the shortest path.

{{draw: edge-a-b}} Connect A to B.
{{draw: edge-b-c}} Then B to C.

error-handling: 1, 4-6, 9
setup-and-cleanup: 2-3, 15-17

left-subtree: node-1, node-2, node-3
leaf-nodes: node-4, node-5, node-6

backend: api, db, cache
frontend: web-client, mobile-client

```code:hash lang=ts
function hash(key: string): number {
  let h = 0
  for (const ch of key) {
    h = (h * 31 + ch.charCodeAt(0)) | 0
  }
  return h
}
```

```code:hash lang=ts
function hash(key: string): number {
  let h = 0
  for (const ch of key) {
    h = (h * 31 + ch.charCodeAt(0)) | 0
  }
  return h
}
---
signature: 1
init: 2
loop: 3-5
multiply-add: 4
return-val: 7
```

loop: 3-8

loop-init: 3
loop-body: 4-6
loop-increment: 7

left-subtree: node-1, node-2, node-3
right-subtree: node-4, node-5, node-6

{{focus: left-subtree}} The left subtree is balanced.
{{focus: right-subtree}} But the right subtree is not.

shortest-path: A, C, B, D, E, F
greedy-path: A, B, D, F

path-1: A, C, B, D, E, F
path-2: A, B, D, F

export type RegionDef = {
  readonly name: string;
  readonly target: string;
};

export type CodeState = {
  readonly kind: "code";
  readonly name: string;
  readonly lang: string;
  readonly fileName: string;
  readonly content: string;
  readonly focus: readonly FocusRange[];
  readonly annotations: readonly CodeAnnotation[];
  readonly regions: readonly RegionDef[];  // <-- here
};

export type DataState = {
  readonly kind: "data";
  readonly name: string;
  readonly data: /* ... */;
  readonly regions: readonly RegionDef[];  // <-- here
};