FRAME

FRAME = Framed Region Analysis & Mapping Engine

FRAME is an internal tool for automatically proposing UI component crop regions from source boards/snips, then letting a human quickly correct and export those regions.

Why FRAME exists

FRAME came out of BRIDGE UI implementation work. The pain point is not exporting crops once coordinates exist — that part is easy. The actual bottleneck is:

• looking at a source board or snip
• deciding what the likely component regions are
• manually drawing a large number of rectangles in Figma or another editor

So the product should optimize for:

• automatic crop-region proposal first
• human correction second
• crop export only after that

Detection philosophy

This should not be treated as generic object detection.

The better framing is:

• detect likely UI frames / regions / panels / rows / strips
• tuned for BRIDGE-style boards and snips

Important heuristic targets:

• framed rectangular modules
• strong vertical and horizontal rails
• tables
• nav blocks
• cards
• command/search panels
• framed inputs
• header/footer strips

The tool does not need to perfectly detect tiny icons or freeform decorative details in the first version.

Current State (2026-03-29)

FRAME is now a functional local MVP rather than just a concept shell.

What currently works

• Load a source image
• Run an initial region detection pass
• Select a detected region and run Split selected to propose child regions
• Review child proposals in the Working preview
• Tune split behavior with:
  • split aggressiveness
  • strict split mode
  • optional split debug overlay
• Edit proposal boxes directly in the Working preview:
  • select
  • drag
  • resize
  • delete selected box
  • draw new boxes manually
  • add missing box
  • reset generated proposals
  • undo (Ctrl/Cmd+Z)
• Apply selected proposals or apply-and-move-to-next region
• Mark regions done / skip for now / ignore / delete
• Save and load manifests
• Export crops

Recommended workflow

The intended review loop is:

1. Detect initial regions on the full image (or a selected detect area)
2. Pick a region from the working set
3. Decide whether to:
   • split it,
   • delete it,
   • ignore it,
   • mark it done,
   • or skip it for now
4. If splitting is useful, use Split selected
5. Review the resulting child proposals in the Working preview
6. Fix proposals locally in the Working preview:
   • move/resize boxes
   • remove bad boxes
   • draw missing boxes
7. Apply selected or Apply & next
8. Repeat for the next unresolved region

Important product direction

The project is intentionally moving toward good proposal generation + fast human correction, not perfect automatic detection.

The practical MVP goal is:

• get reasonably close automatically
• make the last 10–30% of correction painless

Known limitations

• Detection / splitting is still heuristic and can miss or over-split child UI blocks
• Some layouts still require manual correction in the Working preview
• The split/debug tooling is helpful, but the detector is not yet reliable enough to replace review

Meaning of the main actions

• Detect — initial broad region proposal
• Split selected — the main "break this parent into child blocks" workflow
• Find children (alternate) — lighter alternate child-detection pass in Advanced controls
• Working preview — local proposal review/correction surface for the selected parent