Skip to content

feat: add vertical flowchart block#563

Merged
miguel-heygen merged 1 commit intomainfrom
feat/flowchart-vertical
Apr 29, 2026
Merged

feat: add vertical flowchart block#563
miguel-heygen merged 1 commit intomainfrom
feat/flowchart-vertical

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

Problem

Closes #558.

The catalog only had a 1920x1080 flowchart block. Vertical short-form projects targeting 1440x2560 had to either avoid the block or letterbox/stretch a landscape composition.

What this fixes

  • Adds a new flowchart-vertical registry block at 1440x2560.
  • Keeps the same flowchart content, ids, timeline beats, cursor interaction, and typing correction as the landscape block.
  • Adds a matching registry-item.json so catalog/install flows can address the portrait block by name.
  • Uses root-id selectors in the new block to avoid introducing the self attribute selector pattern.

Root cause

The existing flowchart block hard-codes landscape dimensions and geometry. A parent composition cannot override the child block's data-width, data-height, SVG viewBox, or node positions from outside the block.

Verification

Local checks

  • bunx oxfmt --check registry/blocks/flowchart-vertical/flowchart-vertical.html registry/blocks/flowchart-vertical/registry-item.json
  • bunx oxlint registry/blocks/flowchart-vertical/flowchart-vertical.html -> 0 files inspected by oxlint, no errors
  • Direct core lint on registry/blocks/flowchart-vertical/flowchart-vertical.html -> 0 errors, 1 existing composition_file_too_large warning, 1 external script info
  • bun run build:hyperframes-runtime
  • bun run --filter @hyperframes/cli dev -- lint /tmp/hf-flowchart-vertical-qa -> 0 errors, 1 existing composition_file_too_large warning

Browser verification

  • Created /tmp/hf-flowchart-vertical-qa embedding compositions/flowchart-vertical.html.
  • Opened Studio at http://localhost:5190 with agent-browser.
  • Played the timeline and captured the portrait block preview.
  • Screenshot: qa-artifacts/issue-558/flowchart-vertical-3s.png
  • Recording: qa-artifacts/issue-558/flowchart-vertical-playback.webm

Notes

The composition_file_too_large warning is inherited from the current catalog/linter policy for large single-file blocks. Splitting the flowchart into smaller sub-compositions would be a broader catalog refactor, so this PR keeps the new block structurally aligned with the existing flowchart item.

Copy link
Copy Markdown
Collaborator

@jrusso1020 jrusso1020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — clean portrait variant for issue #558.

Quality checks:

  • Root has data-composition-id="flowchart-vertical", distinct from the landscape flowchart (so both can coexist in a project)
  • 1440×2560 dimensions match the registry-item.json declaration
  • All 19 GSAP selectors use string concatenation (S + " #node-X"); zero template literals — passes template_literal_selector lint rule out of the box (relevant because that's the same lint rule the existing landscape flowchart block tripped per issue #559, fixed in #564)
  • window.__timelines["flowchart-vertical"] = tl; registered correctly
  • 12s duration matches the GSAP timeline structure (intro through fade-out)

— Review by Rames Jusso

@miguel-heygen miguel-heygen merged commit c0a74c1 into main Apr 29, 2026
29 checks passed
@miguel-heygen miguel-heygen deleted the feat/flowchart-vertical branch April 29, 2026 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Catalog: add portrait flowchart-vertical (1440x2560) variant

2 participants