@otto-assistant/bridge 0.4.92

package/skills/jitter/EDITOR.md

@@ -0,0 +1,219 @@
+# Jitter Editor API Reference
+
+Reference for `window.app` methods and layer types. For utilities, see SKILL.md and use `jitterUtils.*`.
+
+## App Instance Methods
+
+```javascript
+// Playback
+app.play()
+app.stopPlayback()
+app.moveCursor(timeInMs)
+
+// Layer creation (opens picker or adds at cursor)
+app.addArtboard()
+app.addText('toolbar')
+app.addRectShape('toolbar')
+app.addEllipseShape('toolbar')
+app.addMedia('toolbar')
+
+// File operations
+app.renameFile(newName)
+app.deleteFile()
+app.downloadProject()
+app.scheduleSave()
+```
+
+## Dispatch Actions
+
+Use `app.dispatchAction(action)` or `jitterUtils.*` helpers.
+
+### Core Actions
+
+| Action Type         | Purpose                |
+| ------------------- | ---------------------- |
+| `updateObjWithUndo` | Update node properties |
+| `addObjWithUndo`    | Add new node           |
+| `removeObjWithUndo` | Remove nodes           |
+| `setSelection`      | Select nodes           |
+| `emptySelection`    | Clear selection        |
+| `undo` / `redo`     | Undo/redo              |
+| `setCurrentTime`    | Set playhead time      |
+| `zoomToSelection`   | Zoom to selected       |
+
+## Layer Types
+
+### Artboard
+
+```javascript
+{
+  type: "artboard",
+  name: "16:9",
+  width: 1920,
+  height: 1080,
+  duration: 11000,
+  background: true,
+  fillColor: "#ffffff"
+}
+```
+
+### Text
+
+```javascript
+{
+  type: "text",
+  text: "Hello World",
+  fontSize: 48,
+  font: { name: "Poppins", type: "googlefont", weight: 600 },
+  fillColor: "#000000",
+  textAlign: "center",  // "left" | "center" | "right"
+  verticalAlign: "middle"
+}
+```
+
+### Image / SVG / Video / GIF
+
+```javascript
+{
+  type: "image",  // or "svg", "video", "gif"
+  url: "https://example.com/asset.jpg",
+  width: 400,
+  height: 300,
+  cornerRadius: 0
+}
+```
+
+### Shapes
+
+```javascript
+// Rectangle
+{ type: "rect", fillColor: "#3B82F6", cornerRadius: 8 }
+
+// Ellipse
+{ type: "ellipse", fillColor: "#EF4444" }
+
+// Star
+{ type: "star", fillColor: "#F59E0B", points: 5, innerRadius: 50 }
+```
+
+### Group
+
+```javascript
+{
+  type: "layerGrp",
+  name: "Group Name",
+  clipsContent: false,
+  cornerRadius: 0
+}
+```
+
+## Common Properties
+
+All layers support:
+
+| Property          | Type    | Description         |
+| ----------------- | ------- | ------------------- |
+| `x`, `y`          | number  | Position            |
+| `width`, `height` | number  | Size                |
+| `angle`           | number  | Rotation in degrees |
+| `scale`           | number  | Scale factor        |
+| `opacity`         | number  | 0-100               |
+| `shadowEnabled`   | boolean | Drop shadow         |
+| `strokeEnabled`   | boolean | Stroke/border       |
+
+## Fill Colors
+
+```javascript
+// Solid
+fillColor: "#3B82F6"
+
+// Linear gradient
+fillColor: {
+  type: "GRADIENT_LINEAR",
+  stops: [
+    { id: "s1", position: 0, color: "#FF0000" },
+    { id: "s2", position: 1, color: "#0000FF" }
+  ],
+  transform: { angle: 0, sx: 1, tx: 0.5, ty: 0.5 }
+}
+
+// Radial gradient
+fillColor: {
+  type: "GRADIENT_RADIAL",
+  stops: [...],
+  transform: { sx: 1, tx: 0.5, ty: 0.5 }
+}
+```
+
+## Easing Presets
+
+```javascript
+{ name: "smooth:standard:v1", schema: "v1", config: { intensity: 50 } }
+{ name: "smooth:accelerate:v1", schema: "v1", config: { intensity: 50 } }
+{ name: "smooth:decelerate:v1", schema: "v1", config: { intensity: 50 } }
+{ name: "spring", schema: "v1", config: { stiffness: 100, damping: 10 } }
+{ name: "bounce", schema: "v1", config: { bounces: 3 } }
+{ name: "linear", schema: "v1", config: {} }
+```
+
+## Animation Types
+
+### Transform
+
+`scale`, `move`, `rotate`, `opacity`
+
+### Enter/Exit
+
+`fadeIn/Out`, `growIn/Out`, `shrinkIn/Out`, `slideIn/Out`, `spinIn/Out`, `blurIn/Out`, `textIn/Out`
+
+### Mask
+
+`maskRevealIn/Out`, `maskSlideIn/Out`, `maskCenterIn/Out`
+
+### Media
+
+`playVideo`, `playAudio`
+
+## Node Tree Structure
+
+```
+Artboard (type: "artboard")
+├── LayersTree (type: "layersTree")
+│   ├── LayerGrp (type: "layerGrp")
+│   │   ├── Text (type: "text")
+│   │   └── Image (type: "image")
+│   └── SVG (type: "svg")
+└── OperationsTree (type: "operationsTree")
+    └── OpGrp (type: "opGrp")
+        ├── Scale animation
+        └── FadeIn animation
+```
+
+## State Access
+
+```javascript
+// Current selection
+const state = app.props.observableEditorState.getSnapshot()
+const selectedIds = state.selection.nodesIds
+
+// Project config
+const conf = app.props.observableImmutableConf.lastImmutableConf
+
+// File metadata
+const fileMeta = app.props.fileMeta
+// { id, name, bucket, teamId }
+
+// Subscribe to changes
+const unsubscribe = app.props.observableImmutableConf.subscribe(() => {
+  // Config changed
+})
+```
+
+## File Actions
+
+```javascript
+await app.props.fileActions.duplicateFile(fileId) // Returns new ID
+await app.props.fileActions.deleteFile(fileId)
+await app.props.fileActions.renameFile(name)
+await app.props.fileActions.saveFile()
+```

package/skills/jitter/EXPORT-INTERNALS.md

@@ -0,0 +1,309 @@
+---
+title: Jitter Export Pipeline Internals
+description: |
+  Reverse-engineered architecture of Jitter's export and rendering pipeline.
+  Covers the headless renderer page, scene graph format, network requests,
+  bundle structure, and feasibility of building a standalone local exporter.
+prompt: |
+  Analyze the jitter skill. Try it in the playwriter. Then analyze the
+  JavaScript code that runs in the exporter page. Think about extracting
+  the JavaScript bundle to create a standalone local exporter for AI agents.
+  Examine network requests, download the bundle, see where the data for the
+  scene graph comes from and how we would override it.
+  Files read: @discord/skills/jitter/SKILL.md @discord/skills/jitter/EDITOR.md
+  @discord/skills/jitter/utils/export.ts @discord/skills/jitter/utils/wait.ts
+  @discord/skills/jitter/utils/types.ts @discord/skills/jitter/utils/traverse.ts
+  @discord/skills/jitter/utils/actions.ts
+  Used Playwriter to navigate to jitter.video, open a real project, inspect
+  window.app, download all JS chunks, and intercept network requests on the
+  /api/renderer/ page.
+---
+
+# Jitter Export Pipeline Internals
+
+## Architecture Overview
+
+Jitter is a **Gatsby (React) SPA**. Three pages are relevant to export:
+
+| Page | Path | Role |
+|------|------|------|
+| Editor | `/file/?id=` | Interactive editor, stores scene graph in `window.app` |
+| Export UI | `/export/` | Plan-limit checks, delegates to renderer |
+| **API Renderer** | `/api/renderer/` | **Headless rendering engine** — the key page |
+
+The API Renderer page renders **nothing visible** (`render() { return null }`).
+It exists solely to be driven by an external process (Puppeteer/Playwright on
+Jitter's servers) that calls `window.jitter.renderFrame(time)` in a loop.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Jitter's export backend (server-side Puppeteer)        │
+│                                                         │
+│  1. Open /api/renderer/?file=X&artboardId=Y&width=...   │
+│  2. Wait for jitterLoadEvent {name:"ready"}             │
+│  3. Loop: window.jitter.renderFrame(t) → PNG string     │
+│  4. Pipe PNGs to FFmpeg → MP4/WebM/GIF                  │
+│  5. Upload result to S3, return download link            │
+└─────────────────────────────────────────────────────────┘
+```
+
+## The API Renderer Page
+
+**Source:** `component---src-pages-api-renderer-ts` (3KB, all logic delegated
+to modules in `app.js`)
+
+**URL params** (all required):
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `file` | string | Project/file ID |
+| `bucket` | string | S3 bucket name (e.g. `snackthis-userdata`) |
+| `artboardId` | string | Which artboard to render |
+| `width` | number | Export width in px |
+| `height` | number | Export height in px |
+| `noBg` | boolean | Transparent background |
+| `addWatermark` | boolean | Add Jitter watermark |
+| `superSampling` | number | Render at higher res then downsample |
+| `playbackDirection` | string | `normal`, `reverse`, or `boomerang` |
+| `vfe` | string | Video fallback export (`on`/`off`) |
+
+**Lifecycle:**
+
+1. Parses and Zod-validates URL params
+2. Loads project data: `GM(fileId, bucket)` — tries IndexedDB cache first,
+   then S3/CloudFront
+3. Finds the artboard in the loaded project
+4. Creates a **scene** object (resolves assets, builds render tree)
+5. Creates a **canvas renderer** (Canvas 2D, not WebGL)
+6. Sets `window.jitter`:
+   - `exportContext: { exportWidth, exportHeight, exportDuration }`
+   - `renderFrame(time)` → renders frame, returns `{ name: "frame", t, pngString, ...exportContext }`
+   - `wav` → audio data as number array (or undefined)
+7. Dispatches `CustomEvent("jitterLoadEvent", { detail: { name: "ready", ...exportContext } })`
+8. On error dispatches `{ name: "error", message }`
+
+## Scene Graph Format
+
+The project configuration lives at
+`window.app.props.observableImmutableConf.lastImmutableConf`.
+
+Top-level structure:
+
+```json
+{
+  "nodes": {},
+  "roots": [
+    {
+      "id": "artboard-id",
+      "item": {
+        "type": "artboard",
+        "width": 1080,
+        "height": 1080,
+        "duration": 8000,
+        "fillColor": "#ffffff",
+        "background": true
+      },
+      "children": [
+        { "id": "...", "item": { "type": "operationsTree" }, "children": [...] },
+        { "id": "...", "item": { "type": "layersTree" }, "children": [...] }
+      ]
+    }
+  ]
+}
+```
+
+### Layer types
+
+| Type | Key properties |
+|------|---------------|
+| `artboard` | `width`, `height`, `duration`, `fillColor`, `background` |
+| `layersTree` | Container for visual layers |
+| `operationsTree` | Container for animation operations |
+| `opGrp` | Named animation step (e.g. "Step 1") |
+| `layerGrp` | Visual group, `clipsContent`, `cornerRadius` |
+| `image` | `url` (CloudFront), `width`, `height`, `cornerRadius` |
+| `video` | `url`, `audioUrl`, `width`, `height` |
+| `svg` | `url` |
+| `gif` | `url` |
+| `text` | `text`, `font`, `fontSize`, `fillColor`, `textAlign` |
+| `rect` | `fillColor`, `cornerRadius`, `strokeColor` |
+| `ellipse` | `fillColor` |
+| `star` | `fillColor`, `points`, `innerRadius` |
+
+All layers share: `x`, `y`, `width`, `height`, `angle`, `scale`, `opacity`,
+`shadowEnabled`, `strokeEnabled`.
+
+### Animation operations
+
+Operations live under `operationsTree > opGrp` nodes. Each operation targets
+a layer by `targetId`:
+
+```json
+{
+  "type": "move",
+  "targetId": "layer-id",
+  "startTime": 1000,
+  "endTime": 2000,
+  "toValue": { "moveX": -530, "moveY": 0 },
+  "easing": {
+    "name": "smooth:standard:v1",
+    "schema": "v1",
+    "config": { "intensity": 85 }
+  }
+}
+```
+
+Animation types: `move`, `scale`, `rotate`, `opacity`, `fadeIn/Out`,
+`growIn/Out`, `shrinkIn/Out`, `slideIn/Out`, `spinIn/Out`, `blurIn/Out`,
+`textIn/Out`, `maskRevealIn/Out`, `maskSlideIn/Out`, `maskCenterIn/Out`,
+`playVideo`, `playAudio`.
+
+### Asset URLs
+
+All media assets are served from CloudFront:
+
+```
+https://d154zarmrcpu4a.cloudfront.net/{assetId}.png
+https://d154zarmrcpu4a.cloudfront.net/{assetId}.mp4
+```
+
+Project data (the conf JSON) is stored at:
+
+```
+https://d2q1h0g8a6snwf.cloudfront.net/{encodedFileId}
+```
+
+The `d2q1h0g8a6snwf` URL is for the `snackthis-userdata` bucket.
+Other buckets use `(0,u.T8)(bucket, fileId)` to construct the URL.
+
+## Network Requests During Export
+
+Requests made when the `/api/renderer/` page loads:
+
+**Static assets (cached):**
+- `webpack-runtime-*.js` (11KB)
+- 6 shared chunks (~970KB total)
+- `app.js` (3.0MB) — contains the entire renderer
+- `api-renderer-*.js` (3KB)
+- Page data JSONs from Gatsby
+
+**Data fetches:**
+- `backend2.jitter.video/get-user-infos` — user profile
+- `backend2.jitter.video/get-subscription` — plan info
+- `backend2.jitter.video/teams/get-all-subscriptions`
+- `backend2.jitter.video/realtime/get-token` — WebSocket auth token
+
+**Project data:** loaded from IndexedDB cache if the user recently visited the
+editor, otherwise fetched from S3/CloudFront.
+
+**No rendering API calls** — all rendering is 100% client-side on Canvas 2D.
+
+## JS Bundle Structure
+
+| File | Size | Purpose |
+|------|------|---------|
+| `app-*.js` | **3.0MB** | Core: renderer, scene builder, all shared modules |
+| `editor-page (file-*.js)` | 960KB | Editor UI (not needed for export) |
+| `22016225-*.js` | 176KB | Shared chunk |
+| `3caaf7ec-*.js` | 168KB | Shared chunk |
+| `42b3359b-*.js` | 316KB | Shared chunk |
+| `4fa16633-*.js` | 124KB | Shared chunk (canvas/WebGL refs) |
+| `146c69ca-*.js` | 62KB | Shared chunk |
+| `f27202df-*.js` | 116KB | Shared chunk |
+| `api-renderer-*.js` | **3KB** | Glue: parse params → create scene → expose `window.jitter` |
+| `webpack-runtime-*.js` | 11KB | Module loader |
+
+Total for rendering: ~4.8MB of JavaScript.
+
+### Key webpack modules (inside app.js)
+
+| Module ID | Export | Purpose |
+|-----------|--------|---------|
+| 65031 | `GM` (as `L`) | Project loader: IndexedDB → S3/CloudFront fallback |
+| 82106 | `h` (as `b`) | Scene creation: conf → scene object with asset store |
+| 89018 | `UH` (as `a`) | Renderer factory: scene → `{ canvas, renderFrame, duration }` |
+| 66868 | `HX` (as `Z`) | Core frame render: `(scene, time, canvasCtx) → void` |
+| 82755 | `eM` | Canvas to PNG string conversion |
+| 44852 | `vS` | Artboard finder in project tree |
+| 94533 | `Mj` | Audio track extraction |
+| 61904 | `ev` | Canvas context creation at given dimensions |
+
+## Renderer Internals
+
+The renderer factory (module 89018) creates a closure:
+
+```
+function createRenderer(scene, width, height, superSampling, options):
+  canvas = createCanvasContext(width, height)
+  if superSampling > 1:
+    create chain of progressively smaller canvases for downscaling
+  
+  return {
+    canvas: canvas.canvas,
+    duration: computeDuration(scene.duration, playbackDirection),
+    renderFrame: async (time) => {
+      adjustedTime = applyPlaybackDirection(time)
+      coreRender(scene, adjustedTime, canvas)  // module 66868.HX
+    }
+  }
+```
+
+Scene creation (module 82106) takes the raw conf and:
+1. Resolves the camera/viewport for the selected artboards
+2. Optionally applies imgix transforms for super-sampled images
+3. Optionally strips audio or backgrounds
+4. Loads all assets into an `assetStore` (Map of asset ID → loaded asset)
+5. Creates a `prepass` function (prepares frame) and `render` function (draws frame)
+
+## Standalone Local Exporter: Feasibility
+
+### What would be needed
+
+```
+┌──────────────────────────────────────────────────┐
+│  Local index.html                                │
+│                                                  │
+│  ┌─────────────┐   ┌──────────────────────────┐  │
+│  │ Scene JSON  │──▸│ Jitter Renderer Engine   │  │
+│  │ (uploaded)  │   │ (extracted from app.js)  │  │
+│  └─────────────┘   │ scene → canvas → frames  │  │
+│                     └───────────┬──────────────┘  │
+│                                 ▼                 │
+│                     ┌──────────────────────────┐  │
+│                     │ Frame capture + encode   │  │
+│                     │ MediaRecorder/WebCodecs  │  │
+│                     └───────────┬──────────────┘  │
+│                                 ▼                 │
+│                     ┌──────────────────────────┐  │
+│                     │ MP4/WebM output file     │  │
+│                     └──────────────────────────┘  │
+└──────────────────────────────────────────────────┘
+```
+
+### Assessment by component
+
+| Component | Difficulty | Notes |
+|-----------|-----------|-------|
+| Bundle extraction | Hard | 3MB minified webpack bundle, ~15 transitive module deps |
+| Project data override | Easy | Replace `GM()` loader with local JSON injection |
+| Asset hosting | Easy | Download CloudFront assets, rewrite URLs or use service worker |
+| Auth bypass | Easy | Mock `/get-user-infos`, `/get-subscription` — rendering is client-side |
+| Video encoding | Medium | WebCodecs API, MediaRecorder, or FFmpeg.wasm |
+| Legal/ToS compliance | **Blocker** | Extracting and redistributing Jitter's code likely violates ToS |
+
+### Practical alternatives
+
+1. **Use Playwright to drive `/api/renderer/` directly** — this is exactly
+   what Jitter's own backend does. Navigate, wait for ready event, call
+   `renderFrame()` in a loop, pipe frames to FFmpeg. No extraction needed.
+
+2. **Build a custom renderer** using the scene format as a spec. The JSON
+   format is well-understood. Libraries like `lottie-web`, `rive`, or a
+   custom Canvas 2D renderer could interpret the same format.
+
+3. **Use the editor + Playwriter skill** — the existing jitter skill already
+   supports: modify scene → generate export URL → navigate → download. This
+   works today.
+
+4. **Request an API/self-hosted tier from Jitter** — their architecture
+   already has an `api/renderer` page designed for programmatic use.

package/skills/jitter/SKILL.md

@@ -0,0 +1,158 @@
+---
+name: jitter
+description: Control Jitter (jitter.video) for exporting animations, replacing assets, and modifying text programmatically via Playwriter.
+---
+
+# Jitter Programmatic Control Skill
+
+Control Jitter (jitter.video) for exporting animations, replacing assets, and modifying text.
+
+## Setup
+
+Load utils before interacting with Jitter:
+
+```javascript
+// Load once per page (before navigation or via addInitScript)
+await page.addInitScript({ path: './skills/jitter/dist/jitter-utils.js' })
+
+// Navigate to project
+await page.goto('https://jitter.video/file/?id=YOUR_FILE_ID')
+
+// Wait for app to be ready
+await page.evaluate(() => jitterUtils.waitForApp())
+```
+
+## API Reference
+
+### Traversal
+
+| Function                | Description                        |
+| ----------------------- | ---------------------------------- |
+| `findNodeById(id)`      | Find node by ID                    |
+| `findAllMediaNodes()`   | Get all images/SVGs/videos/GIFs    |
+| `findAllTextNodes()`    | Get all text nodes                 |
+| `getArtboards()`        | Get all artboards with dimensions  |
+| `findNodesByType(type)` | Find nodes by layer type           |
+| `findNodesByName(name)` | Find nodes by name (partial match) |
+| `flattenTree()`         | Get all nodes as flat array        |
+
+### Actions
+
+| Function                       | Description                 |
+| ------------------------------ | --------------------------- |
+| `replaceAssetUrl(nodeId, url)` | Replace image/SVG/video URL |
+| `replaceText(nodeId, text)`    | Replace text content        |
+| `updateNode(nodeId, props)`    | Update any node properties  |
+| `batchReplace(replacements)`   | Batch update multiple nodes |
+| `selectNodes(nodeIds)`         | Select nodes by ID          |
+| `removeNodes(nodeIds)`         | Remove nodes                |
+| `undo()` / `redo()`            | Undo/redo actions           |
+
+### Export
+
+| Function                                    | Description                      |
+| ------------------------------------------- | -------------------------------- |
+| `generateExportUrl(opts)`                   | Generate export URL with options |
+| `generateExportUrlFromCurrentProject(opts)` | Export URL for current project   |
+| `parseJitterUrl(url)`                       | Parse file/node IDs from URL     |
+| `getFileMeta()`                             | Get current file metadata        |
+
+### Snapshot & Restore
+
+| Function                                           | Description                               |
+| -------------------------------------------------- | ----------------------------------------- |
+| `createSnapshot(nodeIds)`                          | Save node states                          |
+| `restoreFromSnapshot(snapshot)`                    | Restore saved states                      |
+| `duplicateProject()`                               | Clone current project                     |
+| `withTemporaryChanges(nodeIds, changes, callback)` | Apply temp changes, run callback, restore |
+
+### Waiting
+
+| Function                        | Description            |
+| ------------------------------- | ---------------------- |
+| `waitForApp(timeout?)`          | Wait for app to load   |
+| `waitForSync(delay?)`           | Wait for server sync   |
+| `waitForNode(nodeId, timeout?)` | Wait for node to exist |
+| `isAppReady()`                  | Check if app is ready  |
+
+## Examples
+
+### Replace Assets and Export
+
+```javascript
+// Get all media nodes
+const media = await page.evaluate(() => jitterUtils.findAllMediaNodes())
+
+// Replace specific assets
+await page.evaluate(() => {
+  jitterUtils.batchReplace([
+    { nodeId: 'abc123', data: { url: 'https://example.com/new-image.svg' } },
+    { nodeId: 'def456', data: { url: 'https://example.com/new-photo.jpg' } },
+  ])
+})
+
+// Wait for sync then export
+await page.evaluate(() => jitterUtils.waitForSync())
+const exportUrl = await page.evaluate(() =>
+  jitterUtils.generateExportUrlFromCurrentProject({ profile: 'lottie' }),
+)
+await page.goto(exportUrl)
+```
+
+### Export with Temporary Changes
+
+```javascript
+await page.evaluate(async () => {
+  const nodeIds = ['node1', 'node2']
+  const changes = {
+    node1: { url: 'https://temp-asset.svg' },
+    node2: { text: 'Temporary Text' },
+  }
+
+  await jitterUtils.withTemporaryChanges(nodeIds, changes, async () => {
+    // Changes applied here, will be restored after
+    const url = jitterUtils.generateExportUrlFromCurrentProject()
+    // ... navigate to export URL and download
+  })
+  // Original values automatically restored
+})
+```
+
+### Find and Update Text
+
+```javascript
+const textNodes = await page.evaluate(() => jitterUtils.findAllTextNodes())
+// [{ id, name, text, fontSize, fontFamily }, ...]
+
+await page.evaluate(() => {
+  jitterUtils.replaceText('textNodeId', 'New headline')
+})
+```
+
+## Export Profiles
+
+| Profile      | Output                         |
+| ------------ | ------------------------------ |
+| `lottie`     | Lottie JSON (vector animation) |
+| `mp4`        | H.264 video                    |
+| `gif`        | Animated GIF                   |
+| `webm`       | WebM video                     |
+| `prores4444` | ProRes 4444 (with alpha)       |
+| `pngs`       | PNG sequence                   |
+
+## Lottie Export Limitations
+
+- **NodeIds are NOT preserved** in exported Lottie - cannot map back to Jitter nodes
+- **Text becomes shapes** - not editable Lottie text layers
+- **Images are embedded** as base64, no external URLs
+- **Videos** export as first frame only
+
+**Workaround:** Always modify assets in Jitter before export using `replaceAssetUrl()`.
+
+## Tips
+
+1. **Wait for sync** after modifications before exporting (1-2 seconds)
+2. **Asset URLs** must be publicly accessible - Jitter fetches server-side
+3. All `*WithUndo` actions can be undone with Ctrl+Z
+4. Node IDs are stable and bookmarkable via `?nodeId=xxx`
+5. Export URLs require being logged in with project access