---
id: TASK-42
title: 'Implement Data Pipes: typed data flow through arrows'
status: Done
assignee: []
created_date: '2026-02-18 20:06'
updated_date: '2026-03-15 00:43'
labels:
  - feature
  - phase-1
  - ecosystem
milestone: m-1
dependencies:
  - TASK-41
priority: high
status_history:
  - status: Done
    timestamp: '2026-03-15 00:43'
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Transform folk-arrow from visual-only connector into a typed data conduit between shapes.

New file lib/data-types.ts:
- DataType enum: string, number, boolean, image-url, video-url, text, json, trigger, any
- Type compatibility matrix and isCompatible() function

Add port mixin to FolkShape:
- ports map, getPort(), setPortValue(), onPortValueChanged()
- Port values stored in Automerge: doc.shapes[id].ports[name].value
- 100ms debounce on port propagation to prevent keystroke thrashing

Enhance folk-arrow:
- sourcePort/targetPort fields referencing named ports
- Listen for port-value-changed on source, push to target
- Type compatibility check before pushing
- Visual: arrows tinted by data type, flow animation when active
- Port handle UI during connect mode

Add port descriptors to AI shapes:
- folk-image-gen: input "prompt" (text), output "image" (image-url)
- folk-video-gen: input "prompt" (text), input "image" (image-url), output "video" (video-url)
- folk-prompt: input "context" (text), output "response" (text)
- folk-transcription: output "transcript" (text)

Example pipeline: Transcription →[text]→ Prompt →[text]→ ImageGen →[image-url]→ VideoGen
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 DataType system with compatibility matrix works
- [ ] #2 Shapes can declare input/output ports via registration
- [ ] #3 setPortValue() writes to Automerge and dispatches event
- [ ] #4 folk-arrow pipes data from source port to target port
- [ ] #5 Type incompatible connections show warning
- [ ] #6 Arrows visually indicate data type and active flow
- [ ] #7 Port values sync to remote clients via Automerge
- [ ] #8 100ms debounce prevents thrashing on rapid changes
<!-- AC:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
Already implemented: data-types.ts with DataType enum + compatibility matrix, FolkShape has portDescriptors/getPort/setPortValue, folk-arrow connects ports with type checking and flow visualization, AI shapes (image-gen, prompt) have port descriptors.
<!-- SECTION:NOTES:END -->
